From 6463c6ddb0b7790b9e5734784f2107da7c83ac93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Mon, 28 Feb 2022 21:10:37 +0100 Subject: [PATCH 01/34] Gnome-Shell: update upstream code to gnome 42 --- .../upstream/gnome-shell-high-contrast.scss | 10 +- .../upstream/gnome-shell-sass/_colors.scss | 36 +- .../upstream/gnome-shell-sass/_common.scss | 189 ++++++---- .../gnome-shell-sass/_common.scss.patch | 4 - .../upstream/gnome-shell-sass/_drawing.scss | 346 +++++++++++------- .../upstream/gnome-shell-sass/_widgets.scss | 2 +- .../gnome-shell-sass/widgets/_app-grid.scss | 64 ++-- .../gnome-shell-sass/widgets/_buttons.scss | 1 + .../gnome-shell-sass/widgets/_calendar.scss | 249 ++++++------- .../gnome-shell-sass/widgets/_check-box.scss | 8 +- .../gnome-shell-sass/widgets/_dash.scss | 58 ++- .../gnome-shell-sass/widgets/_dialogs.scss | 22 +- .../gnome-shell-sass/widgets/_entries.scss | 8 +- .../gnome-shell-sass/widgets/_ibus-popup.scss | 29 +- .../gnome-shell-sass/widgets/_keyboard.scss | 90 +++-- .../widgets/_login-dialog.scss | 94 +++-- .../widgets/_looking-glass.scss | 111 ++++-- .../widgets/_message-list.scss | 90 +++-- .../gnome-shell-sass/widgets/_misc.scss | 8 +- .../widgets/_network-dialog.scss | 48 +-- .../widgets/_notifications.scss | 4 + .../gnome-shell-sass/widgets/_osd.scss | 28 +- .../gnome-shell-sass/widgets/_overview.scss | 2 +- .../gnome-shell-sass/widgets/_panel.scss | 123 +++++-- .../gnome-shell-sass/widgets/_popovers.scss | 187 +++++++--- .../widgets/_screen-shield.scss | 26 +- .../gnome-shell-sass/widgets/_screenshot.scss | 202 ++++++++++ .../gnome-shell-sass/widgets/_scrollbars.scss | 16 +- .../widgets/_search-entry.scss | 34 +- .../widgets/_search-results.scss | 58 ++- .../gnome-shell-sass/widgets/_slider.scss | 27 +- .../widgets/_switcher-popup.scss | 62 ++-- .../gnome-shell-sass/widgets/_switches.scss | 10 +- .../widgets/_tiled-previews.scss | 19 - .../widgets/_window-picker.scss | 12 +- .../widgets/_workspace-switcher.scss | 45 +-- .../widgets/_workspace-thumbnails.scss | 2 +- .../Kali/sass/gnome-shell/upstream/sync.sh | 4 +- 38 files changed, 1412 insertions(+), 916 deletions(-) delete mode 100644 src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch create mode 100644 src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screenshot.scss delete mode 100644 src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_tiled-previews.scss diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-high-contrast.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-high-contrast.scss index a9f95c4b..374bc388 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-high-contrast.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-high-contrast.scss @@ -11,9 +11,9 @@ stage { } .toggle-switch { width: 48px; } -.toggle-switch-us, .toggle-switch-intl { - background-image: url("assets/toggle-off-hc.svg"); - &:checked { background-image: url("assets/toggle-on-hc.svg"); } +.toggle-switch { + background-image: url("assets/toggle-off-hc.svg"); + &:checked { background-image: url("assets/toggle-on-hc.svg"); } } //force opaque panel @@ -22,10 +22,6 @@ stage { &.unlock-screen, &:overview { background-color: #000; - - .panel-corner { - -panel-corner-opacity: 1; - } } .panel-button { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_colors.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_colors.scss index 9d8f72f2..7dfe6662 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_colors.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_colors.scss @@ -1,34 +1,36 @@ // When color definition differs for dark and light variant, -// it gets @if ed depending on $variant +// it gets @if-ed depending on $variant -$base_color: if($variant == 'light', #fff, lighten(desaturate(#241f31, 20%), 2%)); -$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%)); -$fg_color: if($variant == 'light', #2e3436, #eeeeec); +$base_color: if($variant == 'light', #fff, darken(desaturate(#241f31, 100%), 2%)); +$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%)); +$fg_color: if($variant == 'light', transparentize(black, .2), white); $selected_fg_color: #fff; -$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%)); +$selected_bg_color: #3584e4; $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); -$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 8%)); -$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), transparentize($fg_color, 0.93)); + +$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9)); +$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%)); + $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%)); -$top_hilight: $borders_edge; -$warning_color: #f57900; -$error_color: #ff8080; -$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%)); +$warning_color: if($variant == 'light', #e5a50a, #f5c211);; +$error_color: if($variant == 'light', #e01b24, #c01c28); +$success_color: if($variant == 'light', #2ec27e, #26a269); $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%)); -$osd_fg_color: #eeeeec; -$osd_text_color: white; -$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04); +$osd_fg_color: white; +$osd_bg_color: transparentize(desaturate($bg_color, 100%),0.04); $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); -$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%); +$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%)); $osd_borders_color: transparentize(black, 0.3); -$osd_outer_borders_color: transparentize(white, 0.84); +$osd_outer_borders_color: transparentize($osd_fg_color, 0.98); $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2)); -$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color + +// overview background color +$system_bg_color: $base_color; //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss index de98729f..f86de205 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss @@ -28,33 +28,32 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT"; // padding, margin and spacing $base_padding: 6px; $base_margin: 4px; -$base_spacing: 6px; // border radii $base_border_radius: 8px; -$modal_radius:$base_border_radius * 2; +// radii of things that display over other things, e.g. popovers +$modal_radius: $base_border_radius*2; // 24px -// non-standard colors -$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%)); -// $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3)); +// derived hover colors +$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%)); +$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%)); -// hover -$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 5%)); -$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 5%)); -$hover_borders_color: lighten($borders_color,if($variant=='light', 5%, 3%)); +// derived active colors +$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%)); +$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%)); -// active -$active_bg_color: if($variant == 'light', darken($bg_color, 7%), darken($bg_color, 9%)); -$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%)); -$active_borders_color: darken($borders_color,if($variant=='light', 5%, 3%)); +// derived checked colors +$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%)); +$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%)); // fonts -$base_font_size: 10; +$base_font_size: 11; $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2)); // icons $base_icon_size: 1.09em; +$large_icon_size: $base_icon_size*2; // 32px // $base_icon_size: 16px; // Stage @@ -65,20 +64,13 @@ stage { /* Common Stylings */ -// Text -%status_text { - font-size: 2em; - font-weight: bold; - color: $osd_fg_color; -} - // osd panels %osd_panel { color: $osd_fg_color; background-color: $osd_bg_color; - //border: 1px solid $osd_outer_borders_color; - border-radius: $base_border_radius * 2 + 4px; - padding: $base_padding * 2; + border: 1px solid $osd_outer_borders_color; + border-radius: 999px; + padding: $base_padding*2; } // Overview panels @@ -89,8 +81,8 @@ stage { } // icon tiles -%icon_tile { - border-radius: $base_border_radius + 4px; +%tile { + border-radius: $base_border_radius * 2; // 16px padding: $base_padding; border: 2px solid transparent; transition-duration: 100ms; @@ -101,76 +93,125 @@ stage { %bubble_panel { color: $fg_color; background-color: $bg_color; - border: 1px solid if($variant=='light', rgba(0,0,0, 0.6), $borders_color); + border-radius: $base_border_radius*1.25 + 1px; + border: 1px solid $borders_edge; } -// button styling +// normal button styling %button { - border-radius: $base_border_radius; + border-radius: $base_border_radius - 2px; // 6px border-style: solid; border-width: 1px; - min-height: 22px; - padding: $base_padding * 0.5 $base_padding * 4; + font-weight: bold; + padding: $base_padding*.5 $base_padding*4; @include button(normal); &:focus { @include button(focus);} &:hover { @include button(hover);} &:insensitive { @include button(insensitive);} &:active { @include button(active);} + &:checked { @include button(checked);} } -// buttons in dialogs +// buttons in dialogs/notifications +// lighter in color and have a greater radius + +$bubble_button_radius:$base_border_radius*1.25; +$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 7%)); + %bubble_button { - @include button(normal, $shadow: none); padding: $base_padding * 2; - border-style: solid; - border-width: 1px; - border-left-width: 0; - border-bottom-width: 0; + font-weight: bold !important; + margin-right: 1px; - &:insensitive { @include button(insensitive, $shadow: none); } - &:focus { @include button(focus, $shadow: none); } - &:hover { @include button(hover, $shadow: none); } - &:active { @include button(active, $shadow: none); } - - // radius is 2 pixel less to fit in bubble - &:first-child { - border-radius: 0 0 0 $modal_radius - 2px; + @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; } - &:last-child { - border-right-width: 0; - border-radius: 0 0 $modal_radius - 2px 0; + &:last-child:ltr { + border-radius: 0 0 $bubble_button_radius 0; + margin-right: 0 !important; + } + + &:first-child:rtl { + border-radius: 0 0 $bubble_button_radius 0; + } + + &:last-child:rtl { + border-radius: 0 0 0 $bubble_button_radius; + margin-right: 0 !important; } &:first-child:last-child { - border-radius: 0 0 $modal_radius - 2px $modal_radius - 2px; + border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important; + margin-right: 0 !important; } } - -// notification styling -@mixin notification_bubble($flat: false) { - border-width: 1px; - border-style: solid; - border-radius: $base_border_radius + 2px; - margin: $base_margin; - - @if $flat { - @include button(undecorated); - } @else { - @include button(normal); - } - - &:focus { - @include button(focus); - } - - &:hover { - @include button(hover); - } - - &:active { - @include button(active); - } +// buttons on OSD elements +// that are undecorated by default and use OSD colors +%osd_button { + @include button(undecorated); + &:insensitive { @include button(undecorated, $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);} + &:outlined,&:checked { @include button(checked, $c:$osd_bg_color);} } + +/* General Typography */ + +%large_title { + font-weight: 300; + @include fontsize(24); +} + +%title_1 { + font-weight: 800; + @include fontsize(20); +} + +%title_2 { + font-weight: 800; + @include fontsize(15); +} + +%title_3 { + font-weight: 700; + @include fontsize(15); +} + +%title_4 { + font-weight: 700; + @include fontsize(13); +} + +%heading { + font-weight: 700; + @include fontsize(11); +} + +%caption_heading { + font-weight: 700; + @include fontsize(9); +} + +%caption { + font-weight: 400; + @include fontsize(9); +} + +%smaller { + font-weight: 400; + @include fontsize(8); +} + +%monospace {font-family: monospace;} +%numeric { font-feature-settings: "tnum";} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch deleted file mode 100644 index b4ec55b8..00000000 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch +++ /dev/null @@ -1,4 +0,0 @@ -53c53 -< $base_font_size: 11; ---- -> $base_font_size: 10; diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss index f09eb123..10c1c3f3 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss @@ -25,103 +25,51 @@ // entries -@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) { +@mixin entry($t, $fc:$selected_bg_color) { // // Entries drawing function // // $t: entry type // $fc: focus color -// $edge: set to none to not draw the bottom edge or specify a color to not use the default one // // possible $t values: // normal, focus, insensitive // @if $t==normal { - background-color: $base_color; - border-color: $borders_color; - + background-color: lighten($bg_color, 5%); + color: transparentize($fg_color,0.3); + border: 2px solid lighten($bg_color, 5%); } + @if $t==focus { - border-color: if($fc==$selected_bg_color, - $selected_borders_color, - darken($fc,35%)); - box-shadow: inset 0 0 0 2px $fc; + background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%); + border-color: $fc; + color: $fg_color; + &:hover {} } - @if $t==hover { } + + @if $t==hover { + background-color:lighten($hover_bg_color, 5%); + border-color:lighten($hover_bg_color, 5%); + color: transparentize($fg_color,0.3); + } + @if $t==insensitive { + background-color:lighten($insensitive_bg_color, 5%); + border-color: lighten($insensitive_bg_color, 5%); color: $insensitive_fg_color; - border-color: $insensitive_bg_color; - box-shadow: none; } } -// buttons - -@function draw_border_color ($c) { - // - // colored buttons want the border form the base color - // - @return if($variant == 'light', darken($c, 18%), darken($c, 4%)); -} - -@function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) { +// On-screen Keyboard +@mixin keyboard_key($t, $c:$osd_bg_color, $tc:$osd_fg_color) { // -// calculate the color of text shadows +// Keyboard key drawing function // -// $tc is the text color -// $bg is the background color -// - $lbg: lightness($bg)/100%; - @if lightness($tc)<50% { @return rgba(255,255,255,$lbg/($lbg*1.3)); } - @else { @return rgba(0,0,0,1-$lbg*0.8); } -} - -@function draw_button_hilight_color($c) { -// -// calculate the right top highlight color for buttons -// -// $c: base color; -// - @if lightness($c)>90% { @return white; } - @else if lightness($c)>80% { @return rgba(255,255,255, 0.7); } - @else if lightness($c)>50% { @return rgba(255,255,255, 0.5); } - @else if lightness($c)>40% { @return rgba(255,255,255, 0.3); } - @else { @return rgba(255,255,255, 0.1); } -} - -@mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) { -// -// helper function for the text emboss effect -// -// $tc is the optional text color, not the shadow color -// -// TODO: this functions needs a way to deal with special cases -// - - $shadow: draw_text_shadow_color($tc, $bg); - - @if lightness($tc)<50% { - text-shadow: 0 1px $shadow; - icon-shadow: 0 1px $shadow; - } - @else { - text-shadow: 0 -1px $shadow; - icon-shadow: 0 -1px $shadow; - } -} - -@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) { -// -// Button drawing function -// -// $t: button type, -// $c: base button color for colored* types +// $t: key type, +// $c: base key color for colored* types // $tc: optional text color for colored* types -// $edge: set to none to not draw the bottom edge or specify a color to not -// use the default one -// $shadow: set to none to not draw the drop shadow or specify a color to not -// use the default one // // possible $t values: // normal, hover, active, insensitive, insensitive-active, @@ -129,104 +77,236 @@ // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // - $hilight_color: draw_button_hilight_color($c); - $button_edge: if($edge == none, none, draw_widget_edge($edge)); - $blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1))); - $button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow); + // normal key + @if $t==normal { + color: $tc; + background-color: lighten($c, 3%); + } + + // focused key + @if $t==focus { + color: $tc; + background-color: mix(lighten($c, 3%), $selected_bg_color, 90%); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4); + &:hover { + background-color: mix(lighten($c, 8%), $selected_bg_color, 90%); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3); + } + &:active { + background-color: mix(lighten($c, 10%), $selected_bg_color, 90%); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3); + } + } + + // hover key + @else if $t==hover { + color: $tc; + background-color: lighten($c, 7%); + } + + // active key + @else if $t==active { + color: $tc; + background-color: lighten($c, 10%); + } + + // checked key + @else if $t==checked { + color: $tc; + background-color: lighten($c, 15%); + } + + // insensitive key + @else if $t==insensitive { + color: $insensitive_fg_color; + background-color: $insensitive_bg_color; + } + + // reset + @else if $t==undecorated { + background-color: transparent; + background-image: none; + } +} + + +// buttons +// since buttons are all flat an borderless now the mixin is simpler + +@mixin button($t, $tc:$fg_color, $c:$bg_color) { + +$button_bg_color: mix($tc, $c, 5%); +// +// Button drawing function +// +// $t: button type, +// $c: base button colors, derived from fg_color +// $tc: base button colors, derived from fg_color +// +// possible $t values: +// normal, hover, active, insensitive, insensitive-active, +// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, +// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated +// // normal button @if $t==normal { color: $tc; - background-color: lighten($c, 3%); - border-color: draw_border_color($c); - @include draw_shadows($button_shadow); - // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); - text-shadow: 0 1px $text_shadow_color; - icon-shadow: 0 1px $text_shadow_color; + background-color: $button_bg_color; } // focused button @if $t==focus { color: $tc; - text-shadow: 0 1px $text_shadow_color; - icon-shadow: 0 1px $text_shadow_color; + background-color: mix($button_bg_color, $selected_bg_color, 90%); box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4); - //border-color: $selected_bg_color; + &:hover { + background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3); + } + &:active { + background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3); + } } // hover button @else if $t==hover { color: $tc; - background-color: lighten($c, if($variant == 'light', 8%, 5%)); - border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c)); - @include draw_shadows($button_shadow); - text-shadow: 0 1px $text_shadow_color; - icon-shadow: 0 1px $text_shadow_color; + background-color: lighten($button_bg_color, 3%); } // active button @else if $t==active { color: $tc; - background-color: darken($c,3%); - border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%))); - text-shadow: none; - icon-shadow: none; - box-shadow: none; + background-color: lighten($button_bg_color, 6%); + } + + // checked button + @else if $t==checked { + color: $tc; + background-color: lighten($button_bg_color, 9%); + &:hover { background-color: lighten($button_bg_color, 12%);} + &:active { background-color: lighten($button_bg_color, 15%);} } // insensitive button @else if $t==insensitive { - color: $insensitive_fg_color; - border-color: $insensitive_borders_color; - background-color: $insensitive_bg_color; - box-shadow: none; - text-shadow: none; - icon-shadow: none; + color: transparentize($tc, 0.5); + background-color: transparentize($tc, .95); + } + + // default/suggested button + @else if $t==default { + background-color: $selected_bg_color; + color: $selected_fg_color; + &:focus { + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4); + } + &:hover, &:focus { + background-color: lighten($selected_bg_color, 5%); + color: lighten($selected_fg_color, 5%); + } + &:active { + background-color: darken($selected_bg_color, 7%); + color: darken($selected_fg_color, 7%); + } + &:insensitive { + @include button(insensitive); + background-color: transparentize($selected_bg_color, .5); + color: transparentize($selected_fg_color, .5); + } } // reset @else if $t==undecorated { - border-color: transparent; background-color: transparent; - background-image: none; - @include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge); - text-shadow: none; - icon-shadow: none; + background-color: none; + &:insensitive { + @include button(insensitive); + background-color: transparent; + color: transparentize($selected_fg_color, .5); + } } } -// overview icons -@mixin overview-icon($color) { - .overview-icon { - @extend %icon_tile; - color: $color; +// tile +@mixin tile_button($color, $flat: true) { + @extend %tile; + @if $flat { + background-color: transparent; + } @else { + background-color: transparentize($color, .84); } + &:hover { background-color: transparentize($color, .9);} + &:selected, &:focus { + background-color: transparentize($color, .87); + &:hover { background-color: transparentize($color, .84);} + &:active { background-color: transparentize($color, .87);} + } + &:active { background-color: transparentize($color, .84);} + &:outlined, &:checked { + background-color: transparentize($color, .81); + &:active { background-color: transparentize($color, .78);} + &:hover { background-color: transparentize($color, .75);} + } + &:drop { + border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping + background-color: transparentize($selected_bg_color, .8); + } +} - &:hover, - &:selected { - .overview-icon { - background-color: transparentize($color, .9); - } +// overview icon, dash, app grid +@mixin overview_icon($color, $flat: true) { + .overview-icon { @extend %tile; } + @if $flat { + .overview-icon { background-color: transparent;} + } @else { + .overview-icon { background-color: transparentize($color, .81);} + } + &:hover .overview-icon { background-color: transparentize($color, .9);} + + &:selected .overview-icon, + &:focus .overview-icon { + background-color: transparentize($color, .87); + &:hover .overview-icon { background-color: transparentize($color, .84);} + &:active .overview-icon { background-color: transparentize($color, .87);} + } + &:active .overview-icon { background-color: transparentize($color, .84);} + &:outlined .overview-icon, + &:checked .overview-icon { + background-color: transparentize($color, .81); + &:active .overview-icon { background-color: transparentize($color, .78);} + &:hover .overview-icon { background-color: transparentize($color, .75);} + } + &:drop .overview-icon { + border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping + background-color: transparentize($selected_bg_color, .8); + } +} + +// styling for elements within popovers that look like notifications +@mixin card($flat: false) { + border-radius: $base_border_radius; + margin: $base_margin; + box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); + + @if $flat { + @include button(undecorated); + box-shadow: none !important; + } @else { + @include button(normal); } &:focus { - .overview-icon { - background-color: transparentize($color, .7); - // border-color: $selected_bg_color; - } + @include button(focus); } - &:drop { - .overview-icon { - border: 2px solid $selected_bg_color; //already 2px transparent so no jumping - background-color: transparentize($selected_bg_color, .8); - } + &:hover { + @include button(hover); } - &:active, - &:checked { - .overview-icon { - background-color: transparentize(darken($osd_bg_color, 10%), .5); - } + &:active { + @include button(active); } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_widgets.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_widgets.scss index a8d0aa9f..4ed082f1 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_widgets.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_widgets.scss @@ -29,6 +29,7 @@ @import 'widgets/osd'; @import 'widgets/switcher-popup'; @import 'widgets/workspace-switcher'; +@import 'widgets/screenshot'; // Panel @import 'widgets/panel'; @import 'widgets/corner-ripple'; @@ -43,7 +44,6 @@ // A11y / misc @import 'widgets/a11y'; @import 'widgets/misc'; -@import 'widgets/tiled-previews'; @import 'widgets/keyboard'; @import 'widgets/looking-glass'; // Lock / login screens diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss index 2df69116..05a71751 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss @@ -4,10 +4,10 @@ $app_icon_size: 96px; // app icons .icon-grid { - row-spacing: $base_spacing * 2; - column-spacing: $base_spacing * 2; - max-row-spacing: $base_spacing * 12; - max-column-spacing: $base_spacing * 12; + row-spacing: $base_padding * 2; + column-spacing: $base_padding * 2; + max-row-spacing: $base_padding * 12; + max-column-spacing: $base_padding * 12; page-padding-top: $base_padding * 4; page-padding-bottom: $base_padding * 4; page-padding-left: $base_padding * 2; @@ -16,31 +16,28 @@ $app_icon_size: 96px; /* App Icons */ -$app_grid_fg_color: #fff; - // Icon tiles in the app grid -.app-well-app, -%app-well-app { - @include overview-icon($app_grid_fg_color); +.app-well-app { + @include overview_icon($osd_fg_color); + .overview-icon { + padding: $base_padding*2; + } .overview-icon.overview-icon-with-label { - padding: 10px 8px 5px 8px; - > StBoxLayout { - spacing: $base_spacing; + spacing: $base_padding; } } } -/* App Folders */ +// app folders .app-well-app.app-folder { - background-color: $dash_background_color; - border-radius: $base_border_radius + 4px; // same as %icon_tile + @include overview_icon($osd_fg_color, $flat: false); } // expanded folder -.app-folder-dialog { //style like the dash - border-radius: $modal_radius * 1.5; +.app-folder-dialog { + border-radius: $modal_radius*2; background-color: $dash_background_color; padding: 12px 0px 12px 0px; @@ -50,8 +47,7 @@ $app_grid_fg_color: #fff; & .folder-name-label, & .folder-name-entry { - font-size: 18pt; - font-weight: 800; + @extend %title_1; } & .folder-name-entry { width: 300px } @@ -60,20 +56,22 @@ $app_grid_fg_color: #fff; & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; } & .edit-folder-button { - @extend %button; - - padding: 0; + @include button(undecorated); width: 36px; height: 36px; border-radius: 18px; - & > StIcon { icon-size: 16px } + &:focus {@include button(focus);} + &:hover {@include button(hover);} + &:active {@include button(active);} + + & > StIcon { icon-size: $base_icon_size } } } & .icon-grid { - row-spacing: $base_spacing * 2; - column-spacing: $base_spacing * 5; + row-spacing: $base_padding * 2; + column-spacing: $base_padding * 5; page-padding-top: 0; page-padding-bottom: 0; page-padding-left: 0; @@ -84,8 +82,9 @@ $app_grid_fg_color: #fff; margin-bottom: 18px; } } + .app-folder-dialog-container { - padding: 12px; + padding: $base_padding*2; width: 620px; height: 620px; } @@ -95,23 +94,18 @@ $app_grid_fg_color: #fff; height: 5px; width: 5px; border-radius:5px; + margin-bottom: 8px; background-color: $osd_fg_color; - margin-bottom: 1px; } // Rename popup for app folders .rename-folder-popup { .rename-folder-popup-item { - spacing: $base_spacing; + spacing: $base_padding; &:ltr, &:rtl { padding: 0 $base_padding * 2; } } } -// right-click app menu -.app-menu { - max-width: 27.25em; -} - // App Grid pagination indicators .page-indicator { padding: $base_padding $base_padding * 2 0; @@ -148,7 +142,7 @@ $app_grid_fg_color: #fff; background-gradient-start: rgba(255, 255, 255, 0.05); background-gradient-end: transparent; background-gradient-direction: horizontal; - border-radius: 15px 0px 0px 15px; + border-radius: $modal_radius*1.5 0px 0px $modal_radius*1.5; } &.previous:ltr, @@ -156,7 +150,7 @@ $app_grid_fg_color: #fff; background-gradient-start: transparent; background-gradient-end: rgba(255, 255, 255, 0.05); background-gradient-direction: horizontal; - border-radius: 0px 15px 15px 0px; + border-radius: 0px $modal_radius*1.5 $modal_radius*1.5 0px; } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_buttons.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_buttons.scss index 709ac467..6a72c079 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_buttons.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_buttons.scss @@ -2,4 +2,5 @@ .button { @extend %button; // that's it + min-height: 22px; } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss index 947e23d8..c1e4f966 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss @@ -1,291 +1,256 @@ /* Date/Time Menu */ -.clock-display-box { - spacing: 2px; - - .clock { - padding-left: $base_padding * 2; - padding-right: $base_padding * 2; - } -} - // overall menu #calendarArea { - padding:0; + padding: $base_padding - 2px; } // Calendar menu side column .datemenu-calendar-column { - spacing: $base_spacing; - border: 0 solid $bubble_borders_color; - padding: 0 $base_padding * 2; - - &:ltr {margin-right: $base_margin * 2; border-left-width: 1px; } - &:rtl {margin-left: $base_margin * 2; border-right-width: 1px; } - - .datemenu-displays-section { - } - - .datemenu-displays-box { - spacing: $base_spacing; - } -} - -.events-section-title { - @include notification_bubble($flat: true); - color: desaturate(darken($fg_color,40%), 10%); - font-weight: bold; - padding: .4em; + spacing: $base_padding; + &:ltr {padding-left: $base_padding;} + &:rtl {padding-right: $base_padding;} + .datemenu-displays-box {spacing: $base_padding;} } /* today button (the date) */ .datemenu-today-button { - @include notification_bubble($flat: true); + @include card($flat: true); padding: $base_padding * 1.5; // weekday label .day-label { - @include fontsize($base_font_size+1); - font-weight: bold; + @extend %heading; } // date label .date-label { - @include fontsize($base_font_size+7); - font-weight: 1000; + @extend %title_2; } } /* Calendar */ .calendar { - @include notification_bubble; - padding: $base_padding; + @include card(flat); + margin-top: 0; - // month - .calendar-month-label { - color: lighten($fg_color,5%); - font-weight: bold; - padding: 8px 0; - &:focus {} + // month header + .calendar-month-header { + + // prev/next month icons + .calendar-change-month-back StIcon, + .calendar-change-month-forward StIcon { + icon-size: $base_icon_size; + } + + // month label + .calendar-month-label { + color: lighten($fg_color,5%); + @extend %heading; + padding: 8px 0; + } + .pager-button { + background-color: transparent; + height: 32px; + width: 32px; + margin: 2px; + border-radius: $base_border_radius - 2px; + &:hover, &:focus {background-color: $hover_bg_color;} + &:active {background-color: $active_bg_color;} + } } - // prev/next month icons - .calendar-change-month-back StIcon, - .calendar-change-month-forward StIcon { - icon-size: $base_icon_size; - } - - .pager-button { - background-color: transparent; - height: 32px; - width: 32px; - border-radius: $base_border_radius; - &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); } - &:active { background-color: $active_bg_color; } - } - - $calendar_day_size: 32px; .calendar-day-base { - @include fontsize($base_font_size - 3); text-align: center; - width: $calendar_day_size; - height: $calendar_day_size; - padding: 0; margin: 2px; - border-radius: $calendar_day_size * 0.5 + 2px; - border: 1px solid transparent; //avoid jumparound due to today - font-feature-settings: "tnum"; - &:hover, &:focus { background-color: $hover_bg_color; } + padding: 0 !important; + height: $calendar_day_size !important; + width: $calendar_day_size !important; + border-radius: 99px; + @extend %numeric; + @extend %smaller; + + &:hover {background-color: $hover_bg_color;} + &:focus { + background-color: mix($bg_color, $selected_bg_color, 80%); + color: $selected_fg_color; + box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4); + } + &:active,&:selected { - color: lighten($fg_color,10%); - background-color: darken($bg_color,5%); + color: $active_fg_color; + background-color: $active_bg_color; + &:focus { + background-color: mix($active_bg_color, $selected_bg_color, 80%); + } } // day of week heading &.calendar-day-heading { - color: lighten($fg_color,10%); - margin-top: 1em; - @include fontsize($base_font_size - 4); + color: $insensitive_fg_color; + padding-top: $base_padding; + height: 16px !important; // force heading to be smaller height + font-weight: bold; + @extend %smaller; } } - .calendar-day { //border collapse hack - see calendar.js - border-width: 0; - } - - .calendar-day-top { - border-top-width: 1px; - } - - .calendar-day-left { - border-left-width: 1px; - } - + .calendar-day {} .calendar-work-day {} - - .calendar-nonwork-day { - color: $insensitive_fg_color; + .calendar-nonwork-day {color: $insensitive_fg_color;} + .calendar-other-month-day { + color: transparentize($fg_color, 0.5); + &.calendar-nonwork-day { + color: transparentize($insensitive_fg_color, 0.5); + } } // Today .calendar-today { - font-weight: bold; - border: 1px solid transparent; background-color: $selected_bg_color; - color: $selected_fg_color; + font-weight: 800; + color: $selected_fg_color !important; &:hover,&:focus { background-color:lighten($selected_bg_color, 3%); - color: $selected_fg_color; + color: inherit; } &:active,&:selected { background-color: $selected_bg_color; - color: $selected_fg_color; + color: inherit; &:hover,&:focus { background-color:lighten($selected_bg_color, 3%); - color: $selected_fg_color; + color: inherit; } } } .calendar-day-with-events { - background-image: url("assets/calendar-today.svg"); - &.calendar-work-day { - color: lighten($fg_color,10%); - font-weight: bold; - } - } - - .calendar-other-month-day { - color: transparentize($fg_color ,0.5); + background-image: if($variant == 'light', url("assets/calendar-today-light.svg"),url("assets/calendar-today.svg")); + background-size: contain; } .calendar-week-number { @include fontsize($base_font_size - 4); font-weight: bold; - height: 1.8em; - width: 2.3em; - border-radius: 2px; + font-feature-settings: "tnum"; margin: 6px; + padding: 0 $base_padding; + border-radius: 3px; background-color: darken($bg_color, 2%); - color: lighten($fg_color, 5%); + color: $insensitive_fg_color } } /* Events */ .events-button { - @include notification_bubble; + @include card; padding: $base_padding * 2; .events-box { - spacing: $base_spacing; + spacing: $base_padding; } .events-list { - spacing: 2 * $base_spacing; + spacing: 2 * $base_padding; } .events-title { - color: desaturate(darken($fg_color,40%), 10%); - font-weight: bold; + @extend %heading; + color: $insensitive_fg_color; margin-bottom: $base_margin; } .event-time { - color: darken($fg_color,20%); - font-feature-settings: "tnum"; - @include fontsize($base_font_size - 1); + @extend %numeric; + @extend %caption; + color: $insensitive_fg_color; } } /* World clocks */ .world-clocks-button { - @include notification_bubble; + @include card; padding: $base_padding * 2; .world-clocks-grid { - spacing-rows: $base_spacing; - spacing-columns: $base_spacing * 2; + spacing-rows: $base_padding; + spacing-columns: $base_padding * 2; } // title .world-clocks-header { - color: desaturate(darken($fg_color,40%), 10%); - font-weight: bold; + @extend %heading; + color: $insensitive_fg_color; } // city label .world-clocks-city { color: $fg_color; - @include fontsize($base_font_size); - font-weight: normal; } // timezone time .world-clocks-time { - font-weight: bold; + @extend %heading; + @extend %numeric; color: $fg_color; - font-feature-settings: "tnum"; - @include fontsize($base_font_size); - &:ltr { text-align: right; } - &:rtl { text-align: left; } + &:ltr {text-align: right;} + &:rtl {text-align: left;} } // timezone offset label .world-clocks-timezone { - color: darken($fg_color,20%); - font-feature-settings: "tnum"; - @include fontsize($base_font_size - 1); + @extend %numeric; + @extend %caption; + color: $insensitive_fg_color; } } /* Weather */ .weather-button { - @include notification_bubble; + @include card; padding: $base_padding * 2; .weather-box { - spacing: $base_spacing + $base_margin; + spacing: $base_padding + $base_margin; } .weather-header-box { - spacing: $base_spacing; + spacing: $base_padding; } .weather-header { - color: desaturate(darken($fg_color,40%), 10%); - font-weight: bold; + color: $insensitive_fg_color; + @extend %heading; &.location { font-weight: normal; - @include fontsize($base_font_size - 1); } } .weather-grid { - spacing-rows: $base_spacing; - spacing-columns: $base_spacing * 2; + spacing-rows: $base_padding; + spacing-columns: $base_padding * 2; } .weather-forecast-time { + @extend %numeric; + @extend %caption; color: darken($fg_color,30%); - font-feature-settings: "tnum"; - @include fontsize($base_font_size - 2); - font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } .weather-forecast-icon { - icon-size: $base_icon_size * 2; + icon-size: $large_icon_size; } .weather-forecast-temp { - font-weight: bold; + @extend %heading; } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_check-box.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_check-box.scss index 66bc1ea2..c583ac9e 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_check-box.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_check-box.scss @@ -1,7 +1,7 @@ /* Check Boxes */ // these are equal to the size of the SVG assets -$check_height: 22px; +$check_height: 24px; $check_width: 24px; @@ -10,9 +10,9 @@ $check_width: 24px; StBin { width: $check_width; height: $check_height; - background-image: url("assets/checkbox-off.svg"); + background-image: if($variant == 'light', url("assets/checkbox-off-light.svg"), url("assets/checkbox-off.svg")); } - &:focus StBin { background-image: url("assets/checkbox-off-focused.svg"); } + &:focus StBin { background-image: if($variant == 'light', url("assets/checkbox-off-focused-light.svg"), url("assets/checkbox-off-focused.svg"));; } &:checked StBin { background-image: url("assets/checkbox.svg"); } &:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); } -} \ No newline at end of file +} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss index 9e469ab6..ac14cff1 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss @@ -1,18 +1,14 @@ /* Dash */ -$dash_background_color: #3b3b3b; +$dash_background_color: lighten($system_bg_color, 5%); $dash_placeholder_size: 32px; -$dash_padding: $base_padding + 4px; // 10px -$dash_spacing: $base_padding / 4; - -$dash_bottom_margin: $base_margin * 4; - -$dash_border_radius: $modal_radius * 1.5; +$dash_padding: $base_padding*2; // 12px +$dash_border_radius: $modal_radius + $dash_padding; +// container for the dash #dash { - @include fontsize($base_font_size - 2); - margin-top: $base_spacing * 3; - padding: 0 $dash_padding; + @extend %caption; + margin: 2em; .placeholder { // background-image: url("assets/dash-placeholder.svg"); @@ -26,27 +22,36 @@ $dash_border_radius: $modal_radius * 1.5; height: $dash_placeholder_size; } - .overview-icon { - padding: $dash_padding / 2; + // Running app indicator (also shown in app grid) + .app-well-app-running-dot { + margin-bottom: 15px; // hardcoded } } +// background of the dash behind app icons .dash-background { background-color: $dash_background_color; - margin-bottom: $dash_bottom_margin; - padding: $dash_padding; border-radius: $dash_border_radius; + padding: $dash_padding; + spacing: $base_padding; } -// Dash Items -.dash-item-container .app-well-app, .show-apps { - padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin; +// items on the dash +.dash-item-container { + // each app item on the dash + .app-well-app .overview-icon { + margin: 0 4px; + padding: $base_padding; + } + + // show apps button + .show-apps { @include overview_icon($osd_fg_color);} } +// separator between favourites and running apps .dash-separator { width: 1px; - margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin; - background-color: transparentize($osd_fg_color,0.7); + background-color: $borders_color; } // OSD Tooltip @@ -56,18 +61,5 @@ $dash_border_radius: $modal_radius * 1.5; border-radius: 99px; padding: $base_padding $base_padding * 2; text-align: center; - -y-offset: $base_margin * 3; // distance from the dash edge -} - -// Show apps button -.show-apps { - @include overview-icon($osd_fg_color); - - &:focus, - &:checked { - .overview-icon { - background-color: transparentize($osd_bg_color,0.5); - color: $fg_color; - } - } + -y-offset: $base_margin * 2; // distance from the dash edge } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss index 4577626c..548758dd 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss @@ -1,11 +1,10 @@ /* Modal Dialogs */ .headline { - @include fontsize($base_font_size + 1); + @extend %title_4; } .modal-dialog { - border-radius: $modal_radius; @extend %bubble_panel; .modal-dialog-content-box { @@ -35,13 +34,9 @@ .message-dialog-title { text-align: center; - font-size: 18pt; - font-weight: 800; + @extend %title_2; - &.lightweight { - font-size: 13pt; - font-weight: 800; - } + &.lightweight { @extend %title_4;} } .message-dialog-description { text-align: center; } } @@ -52,7 +47,7 @@ .dialog-list-title { text-align: center; - font-weight: bold; + @extend %heading; } .dialog-list-scrollview { max-height: 200px; } @@ -65,7 +60,7 @@ .dialog-list-item-title { font-weight: bold; } .dialog-list-item-description { color: darken($fg_color,5%); - @include fontsize($base_font_size - 1); + @extend %caption; } } } @@ -79,7 +74,7 @@ } .run-dialog-entry { width: 20em; } .run-dialog-description { - @include fontsize($base_font_size - 1); + @extend %caption; text-align: center; color: darken($fg_color, 20%); } @@ -120,7 +115,7 @@ .prompt-dialog-info-label, .prompt-dialog-null-label { text-align: center; - @include fontsize($base_font_size - 1); + @extend %caption; } .prompt-dialog-error-label { @@ -145,8 +140,7 @@ } .audio-selection-device { - border: 1px solid $bubble_borders_color; - border-radius: 12px; + border-radius: $base_border_radius*2; &:hover,&:focus { background-color: $hover_bg_color; } &:active { background-color: $selected_bg_color; diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_entries.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_entries.scss index 5a119455..6be67609 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_entries.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_entries.scss @@ -3,23 +3,27 @@ StEntry { border-radius: $base_border_radius; padding: 8px; - border-width: 0; color: $fg_color; + @include entry(normal); - //&:hover { @include entry(hover);} + &:hover { @include entry(hover);} &:focus { @include entry(focus);} &:insensitive { @include entry(insensitive);} + selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; + StIcon.capslock-warning { icon-size: 16px; warning-color: $warning_color; padding: 0 4px; } + StIcon.peek-password { icon-size: $base_icon_size; padding: 0 4px; } + StLabel.hint-text { margin-left: 2px; color: transparentize($fg_color, 0.3); diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_ibus-popup.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_ibus-popup.scss index eead703e..28f89f33 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_ibus-popup.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_ibus-popup.scss @@ -5,31 +5,32 @@ } .candidate-popup-content { - padding: 0.5em; - spacing: 0.3em; + padding: $base_padding; + spacing: $base_padding; + @extend .popup-menu-content; } .candidate-index { - padding: 0 0.5em 0 0; - color: darken($fg_color,10%); + padding: 0; + padding-right: $base_padding; + color: $insensitive_fg_color; } .candidate-box { - padding: 0.3em 0.5em 0.3em 0.5em; + padding: $base_padding $base_padding*2 $base_padding $base_padding*2; border-radius: $base_border_radius; - &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; } + &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } + &:hover { background-color: $hover_bg_color; color: $hover_fg_color; } } .candidate-page-button-box { height: 2em; - .vertical & { padding-top: 0.5em; } - .horizontal & { padding-left: 0.5em; } + .vertical & { padding-top: $base_padding*2; } + .horizontal & { padding-left: $base_padding*2; } } -.candidate-page-button { - padding: 4px; -} +.candidate-page-button { padding: $base_padding;} -.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; } -.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px; } -.candidate-page-button-icon { icon-size: 1em; } \ No newline at end of file +.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0;box-shadow: none;} +.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px;box-shadow: none;} +.candidate-page-button-icon { icon-size: $base_icon_size; } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss index f866d77c..91d9a3d5 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss @@ -1,15 +1,16 @@ /* On-screen Keyboard */ $key_size: 1.2em; -$key_border_radius: $base_border_radius + 3px; -$key_bg_color: $bg_color; +$key_border_radius: $base_border_radius + 4px; // 12px +$key_bg_color: darken($osd_fg_color, 70%); // $default_key_bg_color: darken($key_bg_color, 4%); -$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%)); +$default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%)); // draw keys using button function #keyboard { - background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1); + // background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1); + background-color: $osd_bg_color; box-shadow: inset 0 1px 0 0 $osd_outer_borders_color; .page-indicator { @@ -31,18 +32,21 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten // the keys .keyboard-key { - @include button(normal, $c:$key_bg_color); - - &:focus { @include button(focus);} - &:hover, &:checked { @include button(hover, $c: $key_bg_color);} - &:active { @include button(active, $c: $key_bg_color); } - @include fontsize($base_font_size + 5); + font-weight: bold; min-height: $key_size; min-width: $key_size; border-width: 1px; border-style: solid; border-radius: $key_border_radius; + box-shadow: 0 1px 0 0 $shadow_color; + + @include keyboard_key(normal, $key_bg_color, $osd_fg_color); + + &:focus { @include keyboard_key(focus);} + &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);} + &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); } + &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); } &:grayed { //FIXMEy background-color: darken($bg_color, 3%); @@ -52,42 +56,59 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten // non-character keys &.default-key { - @include button(normal, $c:$default_key_bg_color); - &:hover, &:checked {@include button(hover, $c: $default_key_bg_color);} - &:active { @include button(active, $c: $default_key_bg_color);} + @include keyboard_key(normal, $default_key_bg_color, $osd_fg_color); + &:hover {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);} + &:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);} + &:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);} + border-radius: $key_border_radius; } // enter key is suggested-action &.enter-key { - @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); - &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));} - &:active {@include button(active, $c: darken($selected_bg_color, 2%));} + @include keyboard_key(normal, $selected_bg_color, $selected_fg_color); + &:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);} + &:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);} + &:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);} + border-radius: $key_border_radius; + color: $osd_fg_color; } - &.shift-key-uppercase { color: $selected_bg_color } + &.shift-key-lowercase {} + + // pressed shift has different style + &.shift-key-uppercase { + background-color: lighten($key_bg_color, 20%); + color: $osd_bg_color; + &:hover { + background-color: lighten($key_bg_color, 25%); + color: lighten($osd_bg_color, 5%); + } + } - StIcon { icon-size: 1.125em; } + // size of icons on keys + StIcon { icon-size: 24px; } } // long press on a key popup .keyboard-subkeys { - color: $osd_fg_color; - -arrow-border-radius: $modal_radius; + -arrow-border-radius: $base_border_radius*2; -arrow-background-color: $osd_bg_color; -arrow-border-width: 1px; -arrow-border-color: lighten($osd_bg_color, 9%); -arrow-base: 20px; -arrow-rise: 10px; - -boxpointer-gap: $base_spacing; + -boxpointer-gap: $base_padding; + padding: $base_padding; .keyboard-key { - @include button(normal, $c:$key_bg_color); + @include keyboard_key(normal, $key_bg_color, $osd_fg_color); - &:focus { @include button(focus);} - &:hover, &:checked { @include button(hover, $c: $key_bg_color);} - &:active { @include button(active, $c: $key_bg_color); } + &:focus { @include keyboard_key(focus);} + &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);} + &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); } + &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); } - border-radius:$base_border_radius; + border-radius:$key_border_radius; } } @@ -112,4 +133,21 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten @include fontsize($base_font_size + 3); spacing: 12px; min-height: 20pt; + padding: $base_padding*2; + color: $osd_fg_color; + + // each suggestion + StButton { + margin: 0 3px; + min-width: 32px; + border-radius: $base_border_radius - 2px; + padding: $base_padding $base_padding*3; + + @include keyboard_key(undecorated, $key_bg_color, $osd_fg_color); + + &:focus { @include keyboard_key(focus);} + &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);} + &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); } + &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); } + } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-dialog.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-dialog.scss index 1789beca..2572f970 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-dialog.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-dialog.scss @@ -13,14 +13,6 @@ $_gdm_bg: $system_bg_color; - StEntry { - @if $variant=='dark' { - $_gdm_entry_bg: darken($system_bg_color, 3%); - background-color: $_gdm_entry_bg; - color: $fg_color; - } - } - .modal-dialog-button-box { spacing: 3px; } .modal-dialog-button { padding: 4px 18px; @@ -47,26 +39,7 @@ color: transparentize($osd_fg_color, 0.3); } &:default { - @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); - border-color: $selected_bg_color; - &:hover, &:focus { - @include button(hover,$c:$selected_bg_color, $tc:$selected_fg_color); - $_def_hover_c: lighten($selected_bg_color, 5%); - background-color: $_def_hover_c; - border-color: $_def_hover_c; - } - &:active { - @include button(active,$c:$selected_bg_color, $tc:$selected_fg_color); - $_def_active_c: darken($selected_bg_color, 5%); - background-color: $_def_active_c; - border-color: $_def_active_c; - } - &:insensitive { - @include button(insensitive); - border-color: darken($selected_bg_color, 10%); - background-color: darken($selected_bg_color, 10%); - color: transparentize($selected_fg_color, 0.3); - } + @include button(default); } } @@ -75,8 +48,8 @@ .login-dialog-session-list-button { padding: 0; border-radius: 99px; - width: $base_icon_size * 2; - height: $base_icon_size * 2; + width: $large_icon_size; + height: $large_icon_size; border-color: darken($system_bg_color, 3%); background-color: darken($system_bg_color, 3%); @@ -103,12 +76,38 @@ } .login-dialog-not-listed-label { - @include fontsize($base_font_size - 1); + @extend %caption; font-weight: bold; color: darken($osd_fg_color,30%); padding-top: 1em; } +.login-dialog-auth-list-view { -st-vfade-offset: 1em; } +.login-dialog-auth-list { + spacing: 6px; + margin-left: 2em; +} + +.login-dialog-auth-list-title { + margin-left: 2em; +} + +.login-dialog-auth-list-item { + border-radius: $base_border_radius + 4px; + padding: 6px; + color: darken($osd_fg_color,30%); + &:focus, &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } +} + +.login-dialog-auth-list-label { + @include fontsize($base_font_size + 2); + font-weight: bold; + padding-left: 15px; + + &:ltr { padding-left: 14px; text-align: left; } + &:rtl { padding-right: 14px; text-align: right; } +} + .login-dialog-user-list-view { -st-vfade-offset: 1em; } .login-dialog-user-list { spacing: 12px; @@ -159,7 +158,7 @@ .login-dialog-prompt-layout { padding-top: 24px; padding-bottom: 12px; - spacing: $base_spacing * 2; + spacing: $base_padding * 2; width: 23em; } @@ -172,3 +171,34 @@ @include fontsize($base_font_size + 1); padding-top: 1em; } + +.login-dialog { + StEntry { + @if $variant=='dark' { + $_gdm_entry_bg: darken($system_bg_color, 3%); + background-color: $_gdm_entry_bg; + color: $fg_color; + } + } +} + +// Custom styling for unlock entry +.unlock-dialog { + StEntry { + border:none !important; + &:focus { + background-color: transparentize($fg_color, 0.9); + } + &:insensitive { + color: transparentize($fg_color, 0.5); + background-color: transparentize($fg_color, 0.95); + } + } + + .cancel-button, + .switch-user-button, + .login-dialog-session-list-button { + border-color: transparent; + background-color: transparentize($fg_color, 0.9); + } +} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss index 006c2ef9..8639889e 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss @@ -1,46 +1,65 @@ /* Looking Glass */ -$text_fg_color: #ccc; - // Dialog #LookingGlassDialog { background-color: $osd_bg_color; - spacing: $base_spacing; - padding: 4px; - border: 1px solid transparentize($osd_fg_color, 0.8); - border-radius: $base_border_radius; + border-radius: 0 0 $modal_radius $modal_radius; + border-top-width: 0; + border: 1px solid $osd_outer_borders_color; color: $osd_fg_color; + padding: $base_padding; + spacing: $base_padding; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); & > #Toolbar { border: none; - border-radius: $base_border_radius; - background-color: $osd_bg_color; + padding: $base_padding; + border-radius: 0; + background-color: transparent; + spacing: $base_padding; + + .lg-toolbar-button { + padding: $base_padding $base_padding*2; + @extend %button; + + & > StIcon { icon-size: $base_icon_size; } + } + } + + .labels { + spacing: $base_padding; } - .labels { spacing: $base_spacing; } .notebook-tab { - -natural-hpadding: $base_padding * 2; - -minimum-hpadding: 6px; + -natural-hpadding: $base_padding*2; + -minimum-hpadding: $base_padding*2; + font-weight: bold; + padding: $base_padding $base_padding*2; color: darken($osd_fg_color, 15%); transition-duration: 100ms; - padding-left: .3em; - padding-right: .3em; - border-bottom-width: 2px; + box-shadow:none; + border:none; + border-radius: $base_border_radius - 2px; + background-color: transparent; + &:hover { color: $osd_fg_color; + background-color: transparentize($osd_fg_color, 0.95); } + &:selected { - border-bottom-width: 2px; - box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color, 5%); color: $osd_fg_color; + background-color: transparentize($osd_fg_color, 0.9); } } - StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; } - StBoxLayout#ResultsArea { spacing: $base_spacing; } + + StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; } + StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; } } .lg-dialog { + StEntry { background-color: transparentize(lighten($osd_bg_color, 5%), 0.4); color: $osd_fg_color; @@ -49,55 +68,55 @@ $text_fg_color: #ccc; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; } + .shell-link { color: $link_color; &:hover { color: lighten($link_color, 10%); } &:active { color: darken($link_color, 10%); } } + .actor-link { - color: $text_fg_color; - &:hover { color: lighten($text_fg_color, 20%); } - &:active { color: darken($text_fg_color, 20%); } + color: $insensitive_fg_color; + &:hover { color: lighten($insensitive_fg_color, 20%); } + &:active { color: darken($insensitive_fg_color, 20%); } } } .lg-completions-text { - font-size: .9em; - font-style: italic; + @extend %caption; + font-style: italic; } .lg-obj-inspector-title { - spacing: $base_spacing; + spacing: $base_padding; } .lg-obj-inspector-button { - border: 1px solid $osd_borders_color; - padding: 4px; - border-radius: $base_border_radius; - &:hover { border: 1px solid #ffffff; } + border: 1px solid $osd_borders_color; + padding: 4px; + border-radius: $base_border_radius; + &:hover { border: 1px solid #ffffff; } } // Extensions -#lookingGlassExtensions { padding: 4px; } +#lookingGlassExtensions { padding: $base_padding; } .lg-extensions-list { - padding: 4px; - spacing: 6px; + padding: $base_padding; + spacing: $base_padding; } .lg-extension { - border: 1px solid lighten($osd_borders_color, 5%); - background-color: lighten($osd_bg_color, 5%); - border-radius: $base_border_radius; - padding: 4px; + padding: $base_padding*2; + @include card; } .lg-extension-name { - font-weight: bold; + @extend %heading; } .lg-extension-meta { - spacing: 6px; + spacing: $base_padding; } // Inspector @@ -105,5 +124,19 @@ $text_fg_color: #ccc; background: $osd_bg_color; border: 1px solid $osd_borders_color; border-radius: $base_border_radius; - padding: 6px; -} \ No newline at end of file + padding: $base_padding; +} + +.lg-debug-flag-button { + StLabel { padding: $base_padding, 2 * $base_padding; } + + color: $fg_color; + &:hover { color: lighten($fg_color, 20%); } + &:active { color: darken($fg_color, 20%); } +} + +.lg-debug-flags-header { + padding-top: 2 * $base_padding; + padding: $base_padding; + @extend %title_2; +} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss index bb9239f4..ac2e8efe 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss @@ -3,28 +3,47 @@ // main list .message-list { - width: 31.5em; - padding: 0 $base_padding * 2; + width: 32em; + border: solid $borders_color; - .message-list-placeholder { spacing: 12px; } + // padding and margins to account for scrollbar + &:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; } + &:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; } + + .message-list-placeholder { + @extend %title_2; + color: transparentize($insensitive_fg_color, .5); + + // icon size and color + > StIcon { + icon-size: $base_icon_size*3; // 48px + margin-bottom: $base_margin*3; + -st-icon-style: symbolic; + } + } } .message-list-sections { - spacing: $base_spacing; - margin: 0 $base_margin * 4; // to account for scrollbar + spacing: $base_padding; + margin: 0; + padding-bottom: $base_padding; + + // to account for scrollbar + &:ltr {margin-right: $base_margin * 3; } + &:rtl {margin-left: $base_margin * 3;} } .message-list-section, .message-list-section-list { - spacing: $base_spacing; + spacing: $base_padding; } // do-not-disturb + clear button .message-list-controls { - margin: ($base_margin * 2) ($base_margin * 4) 0; // NOTE: remove the padding if notification_bubble could remove margin for drop shadow - padding: $base_margin; - spacing: $base_spacing * 2; + padding: $base_padding; + spacing: $base_padding; + @extend %heading; .dnd-button { // We need this because the focus outline isn't inset like for the buttons @@ -32,7 +51,7 @@ // its color when focusing. border-width: 2px; border-color: transparent; - border-radius: 99px; + border-radius: 32px; border-style: solid; &:focus { @@ -43,19 +62,20 @@ // message bubbles .message { - @include notification_bubble; + @include card; // icon container .message-icon-bin { - padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2); + padding: ($base_padding * 3); + padding-right:$base_padding; &:rtl { - padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0; + padding-right:$base_padding; } // icon size and color > StIcon { - icon-size: $base_icon_size*2; // 32px + icon-size: $large_icon_size; // 32px -st-icon-style: symbolic; } @@ -68,13 +88,16 @@ // content .message-content { - padding: $base_padding + $base_margin * 2; spacing: 4px; + padding: ($base_padding*1.5); + margin-bottom: $base_margin*2; } // title .message-title { font-weight: bold; + /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ + padding-top: 0.57em; } // secondary container in title box @@ -95,15 +118,17 @@ // close button .message-close-button { - color: lighten($fg_color, 15%); - &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); } - &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); } + color: $fg_color; + background-color: transparentize($fg_color, 0.9); + border-radius: 99px; + padding: $base_padding - 1px; + margin: 1px; + &:hover {background-color: transparentize($fg_color, 0.8);} + &:active {background-color: transparentize($fg_color, 0.9);} } // body - .message-body { - color: darken($fg_color, 10%); - } + .message-body {color: darken($fg_color, 10%);} } // URLs in messages @@ -113,30 +138,32 @@ /* Media Controls */ .message-media-control { - padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px - color: darken($fg_color, 15%); + padding: 0 $base_padding*3; + margin: $base_padding*2 0; + border-radius: $base_border_radius; + color: $fg_color; - // uses $hover_bg_color since the media controls are in a notification_bubble + // colors are lightened since the media controls are in a card &:hover { background-color: lighten($hover_bg_color, 5%); color: $fg_color; } &:active { - background-color: darken($hover_bg_color, 2%); + background-color: lighten($active_bg_color, 5%); color: $fg_color; } - &:insensitive { color: darken($fg_color,40%); } + &:insensitive { color: lighten($insensitive_fg_color, 5%); } - // fix border-radius for last button - &:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; } - &:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; } + // fix margin for last button + &:last-child:ltr { margin-right: $base_margin*3; } + &:last-child:rtl { margin-left: $base_margin*3; } } // album-art .media-message-cover-icon { - icon-size: $base_icon_size*2 !important; // 48px + icon-size: $base_icon_size*3 !important; // 48px border-radius: $base_border_radius; // when there is no artwork @@ -145,6 +172,7 @@ background-color: $bg_color; border: 1px solid transparent; border-radius: $base_border_radius; - icon-size: $base_icon_size * 2 !important; + icon-size: $large_icon_size !important; // 32px + padding: ($base_padding*2 + 2); // 16px } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss index 0fe174a7..74092782 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss @@ -48,7 +48,7 @@ .caps-lock-warning-label { text-align: center; padding-bottom: 8px; - @include fontsize($base_font_size - 1); + @extend %caption; color: $warning_color; } @@ -57,3 +57,9 @@ .workspace-animation { background-color: $system_bg_color; } + +/* Tiled window previews */ +.tile-preview { + background-color: transparentize($selected_bg_color,0.5); + border: 1px solid $selected_bg_color; +} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_network-dialog.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_network-dialog.scss index 7973d225..11e4e676 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_network-dialog.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_network-dialog.scss @@ -1,4 +1,4 @@ -/* Network Dialogs */ +/* Select Network dialogs */ .nm-dialog { max-height: 34em; min-height: 31em; @@ -10,47 +10,39 @@ padding: 24px; } -.nm-dialog-airplane-box { spacing: 12px; } - -.nm-dialog-airplane-headline { - font-weight: bold; - text-align: center; -} - -.nm-dialog-airplane-text { color: $fg_color; } - -// header -.nm-dialog-header { - font-weight: bold; -} -.nm-dialog-header-icon { - icon-size: $base_icon_size * 2; -} +.nm-dialog-header { @extend %heading; } +.nm-dialog-subheader { color: $insensitive_fg_color;} +.nm-dialog-header-icon { icon-size: $large_icon_size;} .nm-dialog-header-hbox { spacing: 10px; } -// list of networks .nm-dialog-scroll-view { - border: 1px solid $borders_color; - padding:0; - background-color: darken($bg_color, 3%); + padding:$base_padding; + border-radius: $base_border_radius; + background-color: $base_color; } -// list item .nm-dialog-item { - @include fontsize($base_font_size); - border-bottom: 1px solid $borders_color; padding: $base_padding * 2; - spacing: 0px; + &:selected { background-color: $selected_bg_color; + border-radius: $base_border_radius - 3px; color: $selected_fg_color; } + &:hover { background-color:$hover_bg_color;} } -// icons in list .nm-dialog-icon { icon-size: $base_icon_size; } -.nm-dialog-icons { spacing: $base_spacing * 2; } +.nm-dialog-icons { spacing: $base_padding * 2; } // no networks +.no-networks-box { spacing: $base_padding; } .no-networks-label { color: $insensitive_fg_color; } -.no-networks-box { spacing: $base_padding; } \ No newline at end of file + +// airplane mode +.nm-dialog-airplane-box { + text-align: center; + spacing: 12px; +} +.nm-dialog-airplane-headline { @extend %title_3;} +.nm-dialog-airplane-text { color: $insensitive_fg_color;} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_notifications.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_notifications.scss index 5ff46a05..7866767e 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_notifications.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_notifications.scss @@ -2,11 +2,15 @@ $notification_banner_height: 64px; $notification_banner_width: 34em; +$notification_banner_radius: $base_border_radius*1.5; // Banner notifications .notification-banner { min-height: $notification_banner_height; width: $notification_banner_width; + box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1); + border-radius: $notification_banner_radius; + margin: $base_margin; .notification-actions { spacing: 0; diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_osd.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_osd.scss index f85124c7..e4fb0e57 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_osd.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_osd.scss @@ -1,29 +1,39 @@ /* OSD */ -$osd_levelbar_height:8px; +$osd_levelbar_height:6px; .osd-window { @extend %osd_panel; + @extend %heading; text-align: center; font-weight: bold; - spacing: $base_spacing * 2; // 12px - margin: $base_margin * 8; // 32px - min-width: 64px; - min-height: 64px; + spacing: $base_padding * 2; // 12px + padding: $base_padding * 2 $base_padding * 3; + & > * { spacing: 8px; } + margin-bottom: 4em; - StIcon { - icon-size:$base_icon_size * 6; - } + StIcon { icon-size:$large_icon_size;} .osd-monitor-label { font-size: 3em; } + StLabel { + &:ltr { margin-right: 6px; } + &:rtl { margin-left: 6px; } + } + .level { + margin-bottom: 4px; + &:first-child { margin-bottom: 0px; } + height: $osd_levelbar_height; + min-width:$base_icon_size * 10; -barlevel-height: $osd_levelbar_height; -barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9)); -barlevel-active-background-color: $osd_fg_color; -barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-separator-width: 3px; + &:ltr { margin-right: 6px; } + &:rtl { margin-left: 6px; } } } @@ -42,4 +52,4 @@ $osd_levelbar_height:8px; .resize-popup { @extend %osd_panel; -} \ No newline at end of file +} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_overview.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_overview.scss index c593cebc..d8e70eaf 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_overview.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_overview.scss @@ -1,7 +1,7 @@ /* OVERVIEW */ .controls-manager, .secondary-monitor-workspaces { - spacing: $base_spacing * 2; + spacing: $base_padding * 2; } #overviewGroup { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss index 1f465077..3fc57eb0 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss @@ -1,9 +1,8 @@ /* Top Bar */ // a.k.a. the panel -$panel_corner_radius: $base_border_radius+1; $panel_bg_color: #000; -$panel_fg_color: #ddd; +$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%)); $panel_height: 2.2em; $panel_transition_duration: 250ms; // same as the overview transition duration @@ -11,7 +10,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration background-color: $panel_bg_color; font-weight: bold; height: $panel_height; - font-feature-settings: "tnum"; + @extend %numeric; transition-duration: $panel_transition_duration; // transparent panel on lock & login screens @@ -19,20 +18,6 @@ $panel_transition_duration: 250ms; // same as the overview transition duration &.login-screen, &:overview { background-color: transparent; - - .panel-corner { - -panel-corner-opacity: 0; - } - } - - // the rounded outset corners - .panel-corner { - -panel-corner-radius: $panel_corner_radius; - -panel-corner-background-color: $panel_bg_color; - -panel-corner-border-width: 2px; - -panel-corner-border-color: transparent; - -panel-corner-opacity: 1; - transition-duration: $panel_transition_duration; } // panel menus @@ -53,8 +38,20 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } } - &:hover, &:active, &:overview, &:focus, &:checked { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20); + &.screen-recording-indicator { + box-shadow: inset 0 0 0 100px $screenshot_ui_button_red; + + 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 @@ -62,9 +59,41 @@ $panel_transition_duration: 250ms; // same as the overview transition duration box-shadow: none; .clock { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20); + 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 { + 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); + } + } + + &: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); + } } // status area icons @@ -94,16 +123,48 @@ $panel_transition_duration: 250ms; // same as the overview transition duration &.login-screen, &:overview { .panel-button { - &:hover, &:active, &:overview, &:focus, &:checked { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); + &:active, &:overview, &:focus, &:checked { + box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15); &.clock-display { box-shadow: none; .clock { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); + 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 { + box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10); + &.clock-display { + box-shadow: none; + .clock { + 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 { + box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2); + &.clock-display { + box-shadow: none; + .clock { + 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); + } } } } @@ -125,11 +186,23 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // App Menu #appMenu { - spacing: $base_spacing; + spacing: $base_padding; .label-shadow { color: transparent; } } #appMenu .panel-status-menu-box { padding: 0 $base_padding; - spacing: $base_spacing; + spacing: $base_padding; +} + + +// Clock + +.clock-display-box { + spacing: 2px; + + .clock { + padding-left: $base_padding * 2; + padding-right: $base_padding * 2; + } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss index db9df9aa..fd5a02d4 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss @@ -1,16 +1,8 @@ /* Popovers/Menus */ -$popover_arrow_height: 12px; - -//.the popover itself +// the popover itself .popup-menu-boxpointer { - -arrow-border-radius: $base_border_radius+4; - -arrow-background-color: $bg_color; - -arrow-border-width: 1px; - -arrow-border-color: $borders_color; - -arrow-base: $popover_arrow_height * 2; - -arrow-rise: $popover_arrow_height; - -arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); // dreaming bugzilla #689995 + margin: $base_margin; // used as distance from the screen edge } // container of the popover menu @@ -18,84 +10,139 @@ $popover_arrow_height: 12px; min-width: 15em; color: $fg_color; - //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is + //.popup-status-menu-item {font-weight: normal; color: pink;} //dunno what that is &.panel-menu { - -boxpointer-gap: $base_margin; // distance from the panel - margin-bottom: 1.75em; + -boxpointer-gap: $base_margin+2px; // distance from the panel + margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen } } +// popover content .popup-menu-content { - padding: $base_padding * 2 + $base_margin 0; + padding: $base_padding; + // account for margin oddities + border-radius: $modal_radius - 2px; + border: 1px solid $borders_edge; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); + background-color: $bg_color; } // menu items .popup-menu-item { - spacing: $base_padding; - padding: $base_padding; + padding: $base_padding*1.5 $base_padding*2; + border-radius: $base_border_radius; + transition: 0.2s all ease; + background-color: transparent; - &:ltr { padding-right:1.75em; padding-left: 0; } - &:rtl { padding-right: 0; padding-left:1.75em; } + &:focus, &:hover { + background-color: $hover_bg_color !important; + &:active { background-color: $active_bg_color !important;} + } + + &:checked {background-color: $checked_bg_color !important;} &:checked { - background-color: lighten($bg_color, 2%); - box-shadow: none; + margin-bottom: 0; + box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%); + border-radius: $base_border_radius $base_border_radius 0 0; + &:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;} + &:active { background-color: lighten($checked_bg_color, 5%) !important;} } - &.selected { - background-color: transparentize(white, if($variant=='light', 0.2, 0.9)); - color: $fg_color; + &:active { + background-color: lighten($active_bg_color, 5%); + color: $active_fg_color; } - &:active { - background-color: $selected_bg_color; - color: $selected_fg_color; - } - - &:insensitive { color: transparentize($fg_color,0.5);} + &:insensitive {color: transparentize($fg_color,0.5);} } -// all icons and other graphical elements + +// all other graphical elements (sliders) .popup-inactive-menu-item { color: $fg_color; - - &:insensitive { color: transparentize($fg_color,0.5); } + &:insensitive { color: $insensitive_fg_color; } } // symbolic icons in popover .popup-menu-arrow, -.popup-menu-icon { icon-size: $base_icon_size; } +.popup-menu-icon { + icon-size: 16px !important; // for some reason the variable doesn't work here +} + +.popup-menu-arrow { + &:ltr {margin-right: $base_margin;} + &:rtl {margin-left: $base_margin;} +} + // popover submenus .popup-sub-menu { - background-color: darken($bg_color, 3%); - box-shadow: none; - border-top: 1px solid transparentize($borders_color, 0.2); - border-bottom: 1px solid transparentize($borders_color, 0.2); + background-color: $checked_bg_color; + border-radius: 0 0 $base_border_radius $base_border_radius; + + .popup-menu-ornament { + min-width: $base_icon_size !important; + } + + // submenu specific styles + .popup-menu-item { + border-radius: 0; + margin: 0; + + &:last-child { + border-radius: 0 0 $base_border_radius $base_border_radius; + } + + &:focus,&:hover { background-color: lighten($hover_bg_color, 10%) !important;} + &:checked { + background-color: lighten($checked_bg_color, 10%) !important; + &:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;} + } + &:active { background-color: lighten($active_bg_color, 10%) !important;} + } + + .popup-menu-section { + .popup-menu-item:last-child { + &:hover,&:focus {border-radius: 0;} + } + &:last-child .popup-menu-item:last-child { + border-radius: 0 0 $base_border_radius $base_border_radius; + } + } } // container for radio and check boxes .popup-menu-ornament { + @extend %heading; width: 1.2em; + text-align: center !important; - &:ltr { text-align: right }; - &:rtl { text-align: left }; + &:ltr {text-align: right;}; + &:rtl {text-align: left;}; } // separator .popup-separator-menu-item { - padding: 0; + padding:0; + margin: 6px 0; .popup-separator-menu-item-separator { - //-margin-horizontal: 24px; height: 1px; //not really the whole box - margin: 6px 64px; - background-color: lighten($borders_color, 2%); - .popup-sub-menu & { //submenu separators - margin: 0 64px 0 32px; - @if $variant == 'dark' { - background-color: lighten($bg_color,10%); - } + background-color: $borders_color; + } + + .popup-menu-ornament { + width: 0 !important; + } + + .popup-sub-menu & { + padding: 0; + margin-right: 2.5em !important; // account for ornament + background-color: transparent; + + .popup-separator-menu-item-separator { + background-color: lighten($borders_color, 7%); } } } @@ -108,24 +155,44 @@ $popover_arrow_height: 12px; // system status menu .aggregate-menu { - min-width: 21em; + min-width: 22em; + + // this is unneeded at the top-level in this menu, hide it + .popup-menu-ornament { width: 0 !important; } // lock screen, shutdown, etc. buttons - .popup-menu-icon { - padding:0; - margin: 0 $base_margin; + .popup-menu-icon { -st-icon-style: symbolic; + &:ltr {margin-right: $base_margin*2;} + &:rtl {margin-left: $base_margin*2;} } + // account for ornaments in submenus with padding .popup-sub-menu .popup-menu-item > :first-child { - // account for icons in submenus with padding - &:ltr { - padding-left: $base_padding + $base_margin * 2; - margin-left: $base_icon_size; - } - &:rtl { - padding-right: $base_padding + $base_margin * 2; ; - margin-right: $base_icon_size; + // this value is hardcoded for visual effect + &:ltr { margin-left: $base_margin*2;} + &:rtl { margin-right: $base_margin*2;} + } +} + +// right-click (and panel) app menu +.app-menu { + max-width: 27.25em; + .popup-menu-content { margin: $base_margin;} + + &.panel-menu { + .popup-menu-content { margin: 0;} // avoid doubling up margin + } + + // this is unneeded at the top-level in this menu, hide it + .popup-menu-ornament { width: 0 !important; } + + .popup-inactive-menu-item:first-child { + // "Open Windows" label + > StLabel { + @extend %caption_heading; + &:ltr {margin-right: $base_margin*2;} + &:rtl {margin-left: $base_margin*2;} } } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screen-shield.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screen-shield.scss index e289fdba..6550e5bc 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screen-shield.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screen-shield.scss @@ -11,7 +11,7 @@ .unlock-dialog-clock-time { font-size: 64pt; padding-top: 42px; - font-feature-settings: "tnum"; + @extend %numeric; } .unlock-dialog-clock-date { @@ -25,10 +25,11 @@ } .unlock-dialog-notifications-container { - margin: 12px 0; + margin: 12px; spacing: 6px; width: 23em; background-color: transparent; + .summary-notification-stack-scrollview { padding-top: 0; padding-bottom: 0; @@ -36,39 +37,36 @@ .notification, .unlock-dialog-notification-source { - padding: 12px 6px; + padding: 12px 16px; border: none; - background-color: transparentize($osd_bg_color,0.7); + background-color: transparentize($osd_fg_color,0.9); color: $osd_fg_color; border-radius: $modal_radius; - &.critical { background-color: transparentize($osd_bg_color,0.1) } + &.critical { background-color: transparentize($osd_fg_color,0.8) } } } .unlock-dialog-notification-label { - padding: 0px 0px 0px 12px; + padding: 0 0 0 12px; } .unlock-dialog-notification-count-text { - weight: bold; - padding: 0 6px; - color: $osd_bg_color; - background-color: transparentize($osd_fg_color, 0.7); + font-weight: bold; + padding: 0 12px; + color: $osd_fg_color; + background-color: transparentize($osd_fg_color, 0.9); border-radius: 99px; - margin-right: 12px; - } .screen-shield-background { //just the shadow, really background: black; - box-shadow: 0px 2px 4px rgba(0,0,0,0.6); + box-shadow: 0 2px 4px rgba(0,0,0,0.6); } #lockDialogGroup { background-color: $system_bg_color; } - #unlockDialogNotifications { StButton#vhandle, StButton#hhandle { background-color: transparentize($bg_color,0.7); diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screenshot.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screenshot.scss new file mode 100644 index 00000000..458c6f04 --- /dev/null +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screenshot.scss @@ -0,0 +1,202 @@ +// Screenshot UI +.icon-label-button-container { + spacing: $base_padding; + @extend %caption; + + StIcon { icon-size: 32px;} +} + +$screenshot_ui_panel_padding: $base_padding*3; +$screenshot_ui_shot_cast_margin: 21px; +$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin; +$screenshot_ui_shot_cast_spacing: 3px; + +$screenshot_ui_button_red: $error_color; + +.screenshot-ui-panel { + @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: 4em; + spacing: $base_padding * 2; +} + +.screenshot-ui-close-button { + @extend .window-close; // copy window close button + padding: $base_padding; // but with more padding + &.left { margin-left: 8px; } + &.right { margin-right: 8px; } +} + +.screenshot-ui-type-button { + @extend %osd_button; + padding: $base_padding * 2 $base_padding * 3 !important; + border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding; +} + +.screenshot-ui-capture-button { + width: 36px; + height: 36px; + border-radius: 99px; + border: 4px $osd_fg_color; + padding: 4px; + + .screenshot-ui-capture-button-circle { + background-color: $osd_fg_color; + transition-duration: 200ms; + &:hover, &:focus { background-color: $hover_bg_color; } + border-radius: 99px; + } + + &:hover, &:focus { + .screenshot-ui-capture-button-circle { + background-color: darken($osd_fg_color, 15%); + } + } + + &:active { + .screenshot-ui-capture-button-circle { + background-color: darken($osd_fg_color, 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: $modal_radius; + padding: $screenshot_ui_shot_cast_spacing; + spacing: $screenshot_ui_shot_cast_spacing; + + &:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding; } + &:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding; } +} + +.screenshot-ui-shot-cast-button { + padding: $base_padding $base_padding*2; + background-color: transparent; + &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); } + &:active { background-color: lighten($active_bg_color,5%); } + &:checked { background-color: white; color: black; } + + border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing; + + StIcon { icon-size: $base_icon_size; } +} + +.screenshot-ui-show-pointer-button { + @extend %osd_button; + border-radius: 99px; + padding: $base_padding * 2 !important; + StIcon { icon-size: $base_icon_size; } +} + +.screenshot-ui-area-indicator-shade { + background-color: rgba(0,0,0,.3); +} + +.screenshot-ui-area-selector { + .screenshot-ui-area-indicator-shade { + background-color: rgba(0,0,0,.5); + } + + .screenshot-ui-area-indicator-selection { + border: 2px white; + } +} + +.screenshot-ui-area-selector-handle { + border-radius: 99px; + background-color: white; + box-shadow: 0 1px 3px 2px rgba(0,0,0,0.2); + width: 24px; + height: 24px; +} + +.screenshot-ui-window-selector { + background-color: $system_bg_color; + + .screenshot-ui-window-selector-window-container { + margin: 100px; + } + + &:primary-monitor { + .screenshot-ui-window-selector-window-container { + // Make some room for the panel. + margin-bottom: 200px; + } + } +} + +.screenshot-ui-window-selector-window-border { + transition-duration: 200ms; + border-radius: $modal_radius; + border: 6px transparent; +} + +.screenshot-ui-window-selector-check { + transition-duration: 200ms; + color: transparent; + border-radius: 99px; + border-width: 12px; + icon-size: 24px; +} + +.screenshot-ui-window-selector-window { + &:hover { + .screenshot-ui-window-selector-window-border { + border-color: darken($selected_bg_color, 15%); + } + } + &:checked { + .screenshot-ui-window-selector-window-border { + border-color: $selected_bg_color; + background-color: transparentize($selected_bg_color, 0.8); + } + + .screenshot-ui-window-selector-check { + color: white; + background-color: $selected_bg_color; + } + } +} + +.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; + } +} + +.screenshot-ui-tooltip { + color: $osd_fg_color; + background-color: $osd_bg_color; + border-radius: 99px; + padding: $base_padding $base_padding * 2; + text-align: center; + -y-offset: 24px; +} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_scrollbars.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_scrollbars.scss index 5d50994d..77cde653 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_scrollbars.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_scrollbars.scss @@ -9,8 +9,8 @@ StScrollBar { padding: 0; StScrollView & { - min-width: 14px; - min-height: 14px; + min-width: 8px; + min-height: 8px; } StBin#trough { @@ -20,10 +20,10 @@ StScrollBar { StButton#vhandle, StButton#hhandle { border-radius: 8px; - background-color: mix($fg_color, $bg_color, 60%); - //border: 3px solid transparent; //would be nice to margin or at least to transparent - margin: 3px; - &:hover { background-color: mix($fg_color, $bg_color, 80%); } - &:active { background-color: $selected_bg_color; } + background-color: mix($fg_color, $bg_color, 30%); + border: 3px solid transparent; //would be nice to margin or at least to transparent + transition: 500ms all ease; + &:hover {background-color: mix($fg_color, $bg_color, 50%);} + &:active {background-color: mix($fg_color, $bg_color, 40%);} } -} \ No newline at end of file +} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-entry.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-entry.scss index d3584fb9..faca50e4 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-entry.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-entry.scss @@ -5,30 +5,22 @@ $search_entry_height: 36px; %search_entry, .search-entry { - width: $search_entry_width; - padding: $base_padding+1 $base_padding+3; border-radius: $search_entry_height * 0.5; // half the height - color: transparentize($fg_color,0.3); - background-color: $bg_color; - margin-top: $base_spacing * 2; - margin-bottom: $base_spacing; - border-width: 2px; - border-color: transparent; - &:hover { - background-color: $hover_bg_color; - color: $hover_fg_color; - } - &:focus { - border-style: solid; - border-color: $selected_bg_color; - color: $fg_color; - box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.2); - } + margin-top: $base_padding * 2; + margin-bottom: $base_padding; + padding: $base_padding+1 $base_padding+3; + width: $search_entry_width; - .search-entry-icon { - icon-size: $base_icon_size; - padding: 0 4px; + @include entry(normal); + &:hover { @include entry(hover);} + &:focus { @include entry(focus);} + &:insensitive { @include entry(insensitive);} + + .search-entry-icon { color: inherit; + icon-size: $base_icon_size; + margin-top: 2px; // center vertically + padding: 0 4px; } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss index 0d81c974..4ad3f082 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss @@ -11,84 +11,70 @@ // This should be equal to #searchResultsContent spacing spacing: $base_margin * 2; - // separator + // separator (unstyled) .search-section-separator { - // height: 1px; - // background-color: $osd_outer_borders_color; - height: 0; + height: $base_margin*2; // use it as a spacer background-color: transparent; } } // content .search-section-content { - background-color: transparentize(lighten($osd_bg_color, 5%), 0.2); - border-radius: $modal_radius+3; + background-color: lighten($system_bg_color, 5%); + border-radius: $modal_radius*1.5; border: 1px solid $osd_outer_borders_color; - box-shadow: 0 2px 4px 0 $shadow_color; - text-shadow: 0 1px if($variant == 'light', rgba(255,255,255,0.2), rgba(0,0,0,0.2)); + box-shadow: none; + text-shadow: none; color: $osd_fg_color; - padding: $base_padding * 3; + padding: $base_padding*2; + margin: $base_margin; // This is the space between the provider icon and the results container - spacing: $base_margin * 2; } -%search-section-content-item { - @extend %icon_tile; - - &:focus, - &:hover, - &:selected { - background-color: transparentize($osd_fg_color, .9); - transition-duration: 200ms; - } - - &:active, - &:checked { - background-color: transparentize(darken($osd_bg_color, 10%), .1); - } +%search_section_content_item { + @include tile_button($osd_fg_color); + margin: $base_margin; + border-radius: $base_border_radius !important; } // "no results" text .search-statustext { - @extend %status_text; + @extend %large_title; } .grid-search-results { - spacing: $base_spacing * 6; + spacing: $base_padding * 6; } // Search results with icons .grid-search-result { - @extend %app-well-app; + @extend .app-well-app; } // search result provider .search-provider-icon { - @extend %search-section-content-item; + @extend %search_section_content_item; // content .list-search-provider-content { - spacing: $base_spacing * 2; + spacing: $base_padding * 2; // provider labels .list-search-provider-details { width: 120px; - margin-top: 0; - color: darken($osd_fg_color, 8%); - // font-weight: bold; + color: $osd_fg_color; } } } // search results list .list-search-results { - spacing: $base_spacing; + spacing: $base_padding; } // search result listitem .list-search-result { - @extend %search-section-content-item; + @extend %search_section_content_item; // content .list-search-result-content { @@ -97,12 +83,12 @@ // list item title (with leading icon) .list-search-result-title { - spacing: $base_spacing * 2; + spacing: $base_padding * 2; // font-weight: bold; } // list item description .list-search-result-description { - color: darken($osd_fg_color, 30%); + color: $osd_insensitive_fg_color; } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_slider.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_slider.scss index f21d62e6..500249aa 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_slider.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_slider.scss @@ -1,27 +1,22 @@ /* Slider */ -$slider_size: 15px; +$slider_size: 16px; .slider { - height: $slider_size; // slider trough - -barlevel-height: 3px; // has to be an odd number - -barlevel-background-color: $borders_color; //background of the trough - -barlevel-border-width: 1px; - -barlevel-border-color: $borders_color; // trough border color + -barlevel-height: 4px; + -barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), transparentize($fg_color, 0.8)); //background of the trough + -barlevel-border-width: 2px; + -barlevel-border-color: transparent; // trough border color // fill style - -barlevel-active-background-color: $selected_bg_color; //active trough fill - -barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), lighten($selected_bg_color, 2%)); //active trough border + -barlevel-active-background-color: $selected_bg_color; + -barlevel-active-border-color: transparent; // overfill style (red in this case) -barlevel-overdrive-color: $destructive_color; - -barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), lighten($destructive_color, 2%)); //trough border when red; + -barlevel-overdrive-border-color: transparent; //trough border when red; -barlevel-overdrive-separator-width:1px; // slider handler -slider-handle-radius: $slider_size * 0.5; // half the size of the size - -slider-handle-border-width: 1px; - -slider-handle-border-color: if($variant == 'light', $borders_color, $fg_color); - - color: if($variant == 'light', lighten($bg_color, 10%), $fg_color); - &:hover { color: $hover_bg_color; } - &:active { color: $active_bg_color; } -} \ No newline at end of file + -slider-handle-border-width: 0; + -slider-handle-border-color: transparent; // because 0 width +} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss index 32cbbe54..892d3351 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss @@ -1,37 +1,32 @@ /* App Switcher */ +// same as dash +$switcher_padding: $base_padding + 4px; // 10px +$switcher_border_radius: $modal_radius + 8px; + + +// the full screen container of the switcher .switcher-popup { - padding: 8px; - spacing: $base_spacing * 4; + padding: 0; + spacing: $base_padding * 4; } // switcher onscreen panel .switcher-list { @extend %osd_panel; + padding: $switcher_padding; + border-radius: $switcher_border_radius; + box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1); + // container for items in list + .switcher-list-item-container { + spacing: $base_padding * 2; + } + + // each item in the list .item-box { - padding: 8px; - border-radius: $base_border_radius + 1px; - border: 1px solid transparent; - &:outlined { - background-color: transparentize($osd_fg_color, 0.7); - } - - &:selected { - background-color: transparentize($osd_fg_color, 0.7); - color: $osd_fg_color; - } - } - - // window thumbnails - .thumbnail-box { - padding: 2px; - spacing: $base_spacing; - } - - .thumbnail { - width: 256px; + @include tile_button($osd_fg_color); } .separator { @@ -39,16 +34,27 @@ background: $borders_color; } - .switcher-list-item-container { - spacing: $base_spacing * 2; + // container of thumbnails + .thumbnail-box { + padding: 2px; + spacing: $base_padding; + } + + // window thumbnail itself + .thumbnail { + width: 256px; // equal to THUMBNAIL_DEFAULT_SIZE in altTab.js + border-radius:$base_border_radius; } } +// arrow if app has multiple windows .switcher-arrow { - border-color: rgba(0,0,0,0); - color: transparentize($fg_color,0.2); + border-color: transparentize($osd_fg_color, 0.2); + color: transparentize($osd_fg_color, 0.2); + &:highlighted { - color: $fg_color; + border-color: $osd_fg_color; + color: $osd_fg_color; } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switches.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switches.scss index b8748345..b7441083 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switches.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switches.scss @@ -1,16 +1,16 @@ /* Switches */ // these are equal to the size of the SVG assets -$switch_height: 22px; -$switch_width: 46px; +$switch_height: 26px; +$switch_width: 48px; .toggle-switch { color: $fg_color; height: $switch_height; width: $switch_width; background-size: contain; - background-image: if($variant == 'light', url("assets/toggle-off.svg"),url("assets/toggle-off-dark.svg")); + background-image: if($variant == 'light', url("assets/toggle-off-light.svg"),url("assets/toggle-off.svg")); &:checked { - background-image: if($variant == 'light', url("assets/toggle-on.svg"),url("assets/toggle-on-dark.svg")); + background-image: if($variant == 'light', url("assets/toggle-on-light.svg"),url("assets/toggle-on.svg")); } -} \ No newline at end of file +} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_tiled-previews.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_tiled-previews.scss deleted file mode 100644 index a9d000fe..00000000 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_tiled-previews.scss +++ /dev/null @@ -1,19 +0,0 @@ - -/* Tiled window previews */ -$tile_corner_radius: $base_border_radius + 1px; -.tile-preview { - background-color: transparentize($selected_bg_color,0.5); - border: 1px solid $selected_bg_color; -} - -.tile-preview-left.on-primary { - border-radius: $tile_corner_radius 0 0 0; -} - -.tile-preview-right.on-primary { - border-radius: 0 $tile_corner_radius 0 0; -} - -.tile-preview-left.tile-preview-right.on-primary { - border-radius: $tile_corner_radius $tile_corner_radius 0 0; -} \ No newline at end of file diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss index fa3f1919..e494f6d8 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss @@ -1,10 +1,11 @@ /* Window Picker */ -$window_picker_spacing: $base_spacing; // 6px +$window_picker_spacing: $base_padding; // 6px $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; @@ -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/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-switcher.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-switcher.scss index 5b15a30f..f06130ba 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-switcher.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-switcher.scss @@ -1,36 +1,25 @@ /* Workspace Switcher */ -.workspace-switcher-group { - padding: $base_padding * 2; -} -.workspace-switcher-container { - @extend %osd_panel; -} +$ws_indicator_height: $large_icon_size; +$ws_dot_active: $ws_indicator_height / 3; +$ws_dot_inactive: $ws_indicator_height / 6; .workspace-switcher { - background: transparent; - border: none; - border-radius: 0; - padding: 0; - spacing: $base_spacing * 2; + @extend %osd_panel; + margin-bottom: 4em; + spacing: $base_padding * 2; + padding: $base_padding * 2 $base_padding * 3; } -.ws-switcher-box { - background: transparent; - height: 50px; - background-size: 32px; - border: 1px solid transparentize($osd_fg_color,0.9); - border-radius: $base_border_radius + 3px; -} +.ws-switcher-indicator { + background-color: transparentize($osd_fg_color,0.5); + padding: $ws_dot_inactive / 2; + margin: ($ws_indicator_height - $ws_dot_inactive) / 2; + border-radius: $ws_indicator_height; -// active workspace in the switcher -.ws-switcher-active-up, -.ws-switcher-active-down, -.ws-switcher-active-left, -.ws-switcher-active-right { - height: 52px; - background-color: $selected_bg_color; - border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), lighten($selected_bg_color, 5%)); - border-radius: $base_border_radius + 3px; - color: $selected_fg_color; + &:active { + background-color: $osd_fg_color; + padding: $ws_dot_active / 2; + margin: ($ws_indicator_height - $ws_dot_active) / 2; + } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss index b18399a3..7c5a27b3 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss @@ -3,7 +3,7 @@ // thumbnails in overview .workspace-thumbnails { visible-width: 32px; //amount visible before hover - spacing: $base_spacing; + spacing: $base_padding; padding: $base_padding; .workspace-thumbnail { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/sync.sh b/src/themes/Kali/sass/gnome-shell/upstream/sync.sh index 5e2f683a..f986628b 100755 --- a/src/themes/Kali/sass/gnome-shell/upstream/sync.sh +++ b/src/themes/Kali/sass/gnome-shell/upstream/sync.sh @@ -4,7 +4,7 @@ GREEN='\033[0;32m' YELLOW='\033[0;33m' RESET='\033[0m' -VERSION=41.0 +VERSION=6b60a189fded722ae37a7d3e94d51a509a7d2df1 echo printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n" @@ -53,13 +53,13 @@ done <<- EOF gnome-shell-sass/widgets/_panel.scss gnome-shell-sass/widgets/_popovers.scss gnome-shell-sass/widgets/_screen-shield.scss + gnome-shell-sass/widgets/_screenshot.scss gnome-shell-sass/widgets/_scrollbars.scss gnome-shell-sass/widgets/_search-entry.scss gnome-shell-sass/widgets/_search-results.scss 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 From 79b1f40a43dc290fc5d649eb1f0d647d1c3eb55f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Mon, 28 Feb 2022 21:19:31 +0100 Subject: [PATCH 02/34] Gnome-Shell: generate new gnome themes --- .../Kali-Dark/gnome-shell/gnome-shell.css | 2275 ++++++++++------- .../Kali-Light/gnome-shell/gnome-shell.css | 2248 +++++++++------- 2 files changed, 2605 insertions(+), 1918 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 8b311138..b9d16bdb 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -19,28 +19,23 @@ */ /* Global Values */ stage { - font-size: 10pt; + font-size: 11pt; color: #eeeeec; } /* Common Stylings */ -.search-statustext { - font-size: 2em; - font-weight: bold; - color: white; } - -.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window { +.screenshot-ui-panel, .workspace-switcher, .switcher-list, .resize-popup, .osd-window { color: white; background-color: #303340; - border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 999px; padding: 12px; } .workspace-thumbnails .workspace-thumbnail { color: white; background-color: rgba(255, 255, 255, 0.1); } -.app-well-app .overview-icon, -.grid-search-result .overview-icon, .show-apps .overview-icon, .list-search-result, .search-provider-icon { - border-radius: 12px; +.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon, .dash-item-container .show-apps .overview-icon, .list-search-result, .search-provider-icon, .switcher-list .item-box { + border-radius: 16px; padding: 6px; border: 2px solid transparent; transition-duration: 100ms; @@ -49,92 +44,171 @@ stage { .modal-dialog { color: #eeeeec; background-color: #23252e; - border: 1px solid #0d0e11; } + border-radius: 11px; + border: 1px solid rgba(238, 238, 236, 0.07); } -.app-folder-dialog .folder-name-container .edit-folder-button, .button { - border-radius: 8px; +#LookingGlassDialog > #Toolbar .lg-toolbar-button, .button { + border-radius: 6px; border-style: solid; border-width: 1px; - min-height: 22px; + font-weight: bold; padding: 3px 24px; color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { + background-color: #2d2f38; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { - color: #888a8d; - border-color: #0d0e11; - background-color: #242731; - box-shadow: none; - text-shadow: none; - icon-shadow: none; } - .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { + background-color: #343640; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .button:checked { + color: #eeeeec; + background-color: #414451; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .button:checked:hover { + background-color: #484b5a; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .button:checked:active { + background-color: #4f5362; } .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { - color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: none; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; - border-style: solid; - border-width: 1px; - border-left-width: 0; - border-bottom-width: 0; } + font-weight: bold !important; + margin-right: 1px; + color: #eeeeec; + background-color: #3b3f4b; } .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { - color: #888a8d; - border-color: #0d0e11; - background-color: #242731; - box-shadow: none; - text-shadow: none; - icon-shadow: none; } + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); } .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #39455d; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover { + background-color: #3f4b65; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active { + background-color: #45526c; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: none; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #424654; } .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .modal-dialog .modal-dialog-linked-button:first-child, .hotplug-notification-item:first-child, .notification-banner .notification-button:first-child { - border-radius: 0 0 0 14px; } - .modal-dialog .modal-dialog-linked-button:last-child, .hotplug-notification-item:last-child, .notification-banner .notification-button:last-child { - border-right-width: 0; - border-radius: 0 0 14px 0; } + background-color: #484d5c; } + .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked { + color: #eeeeec; + background-color: #4f5565; } + .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover { + background-color: #565c6d; } + .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active { + background-color: #5d6376; } + .modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr { + border-radius: 0 0 0 10px; } + .modal-dialog .modal-dialog-linked-button:last-child:ltr, .hotplug-notification-item:last-child:ltr, .notification-banner .notification-button:last-child:ltr { + border-radius: 0 0 10px 0; + margin-right: 0 !important; } + .modal-dialog .modal-dialog-linked-button:first-child:rtl, .hotplug-notification-item:first-child:rtl, .notification-banner .notification-button:first-child:rtl { + border-radius: 0 0 10px 0; } + .modal-dialog .modal-dialog-linked-button:last-child:rtl, .hotplug-notification-item:last-child:rtl, .notification-banner .notification-button:last-child:rtl { + border-radius: 0 0 0 10px; + margin-right: 0 !important; } .modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child { - border-radius: 0 0 14px 14px; } + border-radius: 0 0 10px 10px !important; + margin-right: 0 !important; } + +.screenshot-ui-show-pointer-button, .screenshot-ui-type-button { + background-color: transparent; + background-color: none; } + .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } + .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { + background-color: transparent; + background-color: none; } + .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } + .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { + color: #eeeeec; + background-color: #37435a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover { + background-color: #3d4962; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active { + background-color: #43506a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover { + color: #eeeeec; + background-color: #404451; } + .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { + color: #eeeeec; + background-color: #474b59; } + .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked { + color: #eeeeec; + background-color: #4d5362; } + .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover { + background-color: #545a6a; } + .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:checked:active, .screenshot-ui-type-button:checked:active { + background-color: #5b6173; } + +/* General Typography */ +.search-statustext { + font-weight: 300; + font-size: 24pt; } + +.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry { + font-weight: 800; + font-size: 20pt; } + +.lg-debug-flags-header, .message-dialog-content .message-dialog-title, .message-list .message-list-placeholder, .datemenu-today-button .date-label { + font-weight: 800; + font-size: 15pt; } + +.nm-dialog-airplane-headline { + font-weight: 700; + font-size: 15pt; } + +.message-dialog-content .message-dialog-title.lightweight, .headline { + font-weight: 700; + font-size: 13pt; } + +.lg-extension-name, .osd-window, .nm-dialog-header, .dialog-list .dialog-list-title, .message-list-controls, .weather-button .weather-forecast-temp, .weather-button .weather-header, .world-clocks-button .world-clocks-time, .world-clocks-button .world-clocks-header, .events-button .events-title, .calendar .calendar-month-header .calendar-month-label, .datemenu-today-button .day-label, .popup-menu-ornament { + font-weight: 700; + font-size: 11pt; } + +.app-menu .popup-inactive-menu-item:first-child > StLabel { + font-weight: 700; + font-size: 9pt; } + +.login-dialog-not-listed-label, .lg-completions-text, .caps-lock-warning-label, #dash, .icon-label-button-container, .prompt-dialog-error-label, +.prompt-dialog-info-label, +.prompt-dialog-null-label, .run-dialog .run-dialog-description, .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description, .weather-button .weather-forecast-time, .world-clocks-button .world-clocks-timezone, .events-button .event-time { + font-weight: 400; + font-size: 9pt; } + +.calendar .calendar-day-base.calendar-day-heading, .calendar .calendar-day-base { + font-weight: 400; + font-size: 8pt; } + +.unlock-dialog-clock-time, #panel, .weather-button .weather-forecast-time, .world-clocks-button .world-clocks-timezone, .world-clocks-button .world-clocks-time, .events-button .event-time, .calendar .calendar-day-base { + font-feature-settings: "tnum"; } /* WIDGETS */ .shell-link { @@ -152,19 +226,24 @@ stage { StEntry { border-radius: 8px; padding: 8px; - border-width: 0; color: #eeeeec; - background-color: #272a34; - border-color: #0d0e11; + background-color: #2e313d; + color: rgba(238, 238, 236, 0.7); + border: 2px solid #2e313d; selection-background-color: #2777ff; selected-color: #ffffff; } + StEntry:hover { + background-color: #363a48; + border-color: #363a48; + color: rgba(238, 238, 236, 0.7); } StEntry:focus { - border-color: #00348d; - box-shadow: inset 0 0 0 2px #2777ff; } + background-color: #2d3546; + border-color: #2777ff; + color: #eeeeec; } StEntry:insensitive { - color: #888a8d; - border-color: #242731; - box-shadow: none; } + background-color: #2f3340; + border-color: #2f3340; + color: #888a8d; } StEntry StIcon.capslock-warning { icon-size: 16px; warning-color: #fd7d00; @@ -177,13 +256,16 @@ StEntry { color: rgba(238, 238, 236, 0.7); } /* Buttons */ +.button { + min-height: 22px; } + /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } .check-box StBin { width: 24px; - height: 22px; + height: 24px; background-image: url("assets/checkbox-off.svg"); } .check-box:focus StBin { @@ -198,33 +280,27 @@ StEntry { /* Switches */ .toggle-switch { color: #eeeeec; - height: 22px; - width: 46px; + height: 26px; + width: 48px; background-size: contain; - background-image: url("assets/toggle-off-dark.svg"); } + background-image: url("assets/toggle-off.svg"); } .toggle-switch:checked { - background-image: url("assets/toggle-on-dark.svg"); } + background-image: url("assets/toggle-on.svg"); } /* Slider */ .slider { - height: 15px; - -barlevel-height: 3px; - -barlevel-background-color: #0d0e11; - -barlevel-border-width: 1px; - -barlevel-border-color: #0d0e11; + -barlevel-height: 4px; + -barlevel-background-color: rgba(238, 238, 236, 0.2); + -barlevel-border-width: 2px; + -barlevel-border-color: transparent; -barlevel-active-background-color: #2777ff; - -barlevel-active-border-color: #317eff; + -barlevel-active-border-color: transparent; -barlevel-overdrive-color: #a61414; - -barlevel-overdrive-border-color: #b01515; + -barlevel-overdrive-border-color: transparent; -barlevel-overdrive-separator-width: 1px; - -slider-handle-radius: 7.5px; - -slider-handle-border-width: 1px; - -slider-handle-border-color: #eeeeec; - color: #eeeeec; } - .slider:hover { - color: #2e313d; } - .slider:active { - color: #0f1014; } + -slider-handle-radius: 8px; + -slider-handle-border-width: 0; + -slider-handle-border-color: transparent; } /* Scrollbars */ StScrollView.vfade { @@ -236,531 +312,490 @@ StScrollView.hfade { StScrollBar { padding: 0; } StScrollView StScrollBar { - min-width: 14px; - min-height: 14px; } + min-width: 8px; + min-height: 8px; } StScrollBar StBin#trough { border-radius: 0; background-color: transparent; } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { border-radius: 8px; - background-color: #9d9ea0; - margin: 3px; } + background-color: #606267; + border: 3px solid transparent; + transition: 500ms all ease; } StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { - background-color: #c5c6c6; } + background-color: #888a8d; } StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { - background-color: #2777ff; } + background-color: #74767a; } /* Popovers/Menus */ .popup-menu-boxpointer, .candidate-popup-boxpointer { - -arrow-border-radius: 12px; - -arrow-background-color: #23252e; - -arrow-border-width: 1px; - -arrow-border-color: #0d0e11; - -arrow-base: 24px; - -arrow-rise: 12px; - -arrow-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } + margin: 4px; } .popup-menu { min-width: 15em; color: #eeeeec; } .popup-menu.panel-menu { - -boxpointer-gap: 4px; + -boxpointer-gap: 6px; margin-bottom: 1.75em; } -.popup-menu-content { - padding: 16px 0; } +.popup-menu-content, .candidate-popup-content { + padding: 6px; + border-radius: 14px; + border: 1px solid rgba(238, 238, 236, 0.07); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); + background-color: #23252e; } .popup-menu-item { - spacing: 6px; - padding: 6px; } - .popup-menu-item:ltr { - padding-right: 1.75em; - padding-left: 0; } - .popup-menu-item:rtl { - padding-right: 0; - padding-left: 1.75em; } + padding: 9px 12px; + border-radius: 8px; + transition: 0.2s all ease; + background-color: transparent; } + .popup-menu-item:focus, .popup-menu-item:hover { + background-color: #2b2f3a !important; } + .popup-menu-item:focus:active, .popup-menu-item:hover:active { + background-color: #303340 !important; } .popup-menu-item:checked { - background-color: #272a34; - box-shadow: none; } - .popup-menu-item.selected { - background-color: rgba(255, 255, 255, 0.1); - color: #eeeeec; } + background-color: #363a48 !important; } + .popup-menu-item:checked { + margin-bottom: 0; + box-shadow: inset 0 -1px 0 0 #2b2f3a; + border-radius: 8px 8px 0 0; } + .popup-menu-item:checked:focus, .popup-menu-item:checked:hover { + background-color: #3d4251 !important; } + .popup-menu-item:checked:active { + background-color: #414657 !important; } .popup-menu-item:active { - background-color: #2777ff; - color: #ffffff; } + background-color: #3b3f4e; + color: #fcfcfc; } .popup-menu-item:insensitive { color: rgba(238, 238, 236, 0.5); } .popup-inactive-menu-item { color: #eeeeec; } .popup-inactive-menu-item:insensitive { - color: rgba(238, 238, 236, 0.5); } + color: #888a8d; } .popup-menu-arrow, .popup-menu-icon { - icon-size: 1.09em; } + icon-size: 16px !important; } + +.popup-menu-arrow:ltr { + margin-right: 4px; } + +.popup-menu-arrow:rtl { + margin-left: 4px; } .popup-sub-menu { - background-color: #1c1e25; - box-shadow: none; - border-top: 1px solid rgba(13, 14, 17, 0.8); - border-bottom: 1px solid rgba(13, 14, 17, 0.8); } + background-color: #363a48; + border-radius: 0 0 8px 8px; } + .popup-sub-menu .popup-menu-ornament { + min-width: 1.09em !important; } + .popup-sub-menu .popup-menu-item { + border-radius: 0; + margin: 0; } + .popup-sub-menu .popup-menu-item:last-child { + border-radius: 0 0 8px 8px; } + .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { + background-color: #414657 !important; } + .popup-sub-menu .popup-menu-item:checked { + background-color: #4c5266 !important; } + .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { + background-color: #484d60 !important; } + .popup-sub-menu .popup-menu-item:active { + background-color: #464b5d !important; } + .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus { + border-radius: 0; } + .popup-sub-menu .popup-menu-section:last-child .popup-menu-item:last-child { + border-radius: 0 0 8px 8px; } .popup-menu-ornament { - width: 1.2em; } + width: 1.2em; + text-align: center !important; } .popup-menu-ornament:ltr { text-align: right; } .popup-menu-ornament:rtl { text-align: left; } .popup-separator-menu-item { - padding: 0; } + padding: 0; + margin: 6px 0; } .popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; - margin: 6px 64px; - background-color: #111217; } + background-color: #0d0e11; } + .popup-separator-menu-item .popup-menu-ornament { + width: 0 !important; } + .popup-sub-menu .popup-separator-menu-item { + padding: 0; + margin-right: 2.5em !important; + background-color: transparent; } .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { - margin: 0 64px 0 32px; - background-color: #383d4b; } + background-color: #1c1e25; } .background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; } .aggregate-menu { - min-width: 21em; } + min-width: 22em; } + .aggregate-menu .popup-menu-ornament { + width: 0 !important; } .aggregate-menu .popup-menu-icon { - padding: 0; - margin: 0 4px; -st-icon-style: symbolic; } + .aggregate-menu .popup-menu-icon:ltr { + margin-right: 8px; } + .aggregate-menu .popup-menu-icon:rtl { + margin-left: 8px; } .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr { - padding-left: 14px; - margin-left: 1.09em; } + margin-left: 8px; } .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { - padding-right: 14px; - margin-right: 1.09em; } + margin-right: 8px; } + +.app-menu { + max-width: 27.25em; } + .app-menu .popup-menu-content, .app-menu .candidate-popup-content { + margin: 4px; } + .app-menu.panel-menu .popup-menu-content, .app-menu.panel-menu .candidate-popup-content { + margin: 0; } + .app-menu .popup-menu-ornament { + width: 0 !important; } + .app-menu .popup-inactive-menu-item:first-child > StLabel:ltr { + margin-right: 8px; } + .app-menu .popup-inactive-menu-item:first-child > StLabel:rtl { + margin-left: 8px; } /* Date/Time Menu */ -.clock-display-box { - spacing: 2px; } - .clock-display-box .clock { - padding-left: 12px; - padding-right: 12px; } - #calendarArea { - padding: 0; } + padding: 4px; } .datemenu-calendar-column { - spacing: 6px; - border: 0 solid #181a20; - padding: 0 12px; } + spacing: 6px; } .datemenu-calendar-column:ltr { - margin-right: 8px; - border-left-width: 1px; } + padding-left: 6px; } .datemenu-calendar-column:rtl { - margin-left: 8px; - border-right-width: 1px; } + padding-right: 6px; } .datemenu-calendar-column .datemenu-displays-box { spacing: 6px; } -.events-section-title { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - border-color: transparent; - background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; - color: #878787; - font-weight: bold; - padding: .4em; } - .events-section-title:focus { - color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .events-section-title:hover { - color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .events-section-title:active { - color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - /* today button (the date) */ .datemenu-today-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - border-color: transparent; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; + background-color: none; + box-shadow: none !important; padding: 9px; } + .datemenu-today-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .datemenu-today-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .datemenu-today-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .datemenu-today-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .datemenu-today-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #343640; } .datemenu-today-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .datemenu-today-button .day-label { - font-size: 11pt; - font-weight: bold; } - .datemenu-today-button .date-label { - font-size: 17pt; - font-weight: 1000; } + background-color: #3b3d49; } /* Calendar */ .calendar { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - padding: 6px; } + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + background-color: transparent; + background-color: none; + box-shadow: none !important; + margin-top: 0; } + .calendar:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .calendar:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .calendar:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .calendar:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .calendar:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #343640; } .calendar:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .calendar .calendar-month-label { - color: #fafaf9; - font-weight: bold; - padding: 8px 0; } - .calendar .calendar-change-month-back StIcon, - .calendar .calendar-change-month-forward StIcon { + background-color: #3b3d49; } + .calendar .calendar-month-header .calendar-change-month-back StIcon, + .calendar .calendar-month-header .calendar-change-month-forward StIcon { icon-size: 1.09em; } - .calendar .pager-button { + .calendar .calendar-month-header .calendar-month-label { + color: #fafaf9; + padding: 8px 0; } + .calendar .calendar-month-header .pager-button { background-color: transparent; height: 32px; width: 32px; - border-radius: 8px; } - .calendar .pager-button:hover, .calendar .pager-button:focus { - background-color: #383d4b; } - .calendar .pager-button:active { - background-color: #0f1014; } - .calendar .calendar-day-base { - font-size: 7pt; - text-align: center; - width: 32px; - height: 32px; - padding: 0; margin: 2px; - border-radius: 18px; - border: 1px solid transparent; - font-feature-settings: "tnum"; } - .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus { - background-color: #2e313d; } + border-radius: 6px; } + .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { + background-color: #2b2f3a; } + .calendar .calendar-month-header .pager-button:active { + background-color: #303340; } + .calendar .calendar-day-base { + text-align: center; + margin: 2px; + padding: 0 !important; + height: 32px !important; + width: 32px !important; + border-radius: 99px; } + .calendar .calendar-day-base:hover { + background-color: #2b2f3a; } + .calendar .calendar-day-base:focus { + background-color: #243658; + color: #ffffff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { - color: white; - background-color: #181a20; } + color: #fcfcfc; + background-color: #303340; } + .calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus { + background-color: #2e4166; } .calendar .calendar-day-base.calendar-day-heading { - color: white; - margin-top: 1em; - font-size: 6pt; } - .calendar .calendar-day { - border-width: 0; } - .calendar .calendar-day-top { - border-top-width: 1px; } - .calendar .calendar-day-left { - border-left-width: 1px; } + color: #888a8d; + padding-top: 6px; + height: 16px !important; + font-weight: bold; } .calendar .calendar-nonwork-day { color: #888a8d; } - .calendar .calendar-today { - font-weight: bold; - border: 1px solid transparent; - background-color: #2777ff; - color: #ffffff; } - .calendar .calendar-today:hover, .calendar .calendar-today:focus { - background-color: #3681ff; - color: #ffffff; } - .calendar .calendar-today:active, .calendar .calendar-today:selected { - background-color: #2777ff; - color: #ffffff; } - .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { - background-color: #3681ff; - color: #ffffff; } - .calendar .calendar-day-with-events { - background-image: url("assets/calendar-today.svg"); } - .calendar .calendar-day-with-events.calendar-work-day { - color: white; - font-weight: bold; } .calendar .calendar-other-month-day { color: rgba(238, 238, 236, 0.5); } + .calendar .calendar-other-month-day.calendar-nonwork-day { + color: rgba(136, 138, 141, 0.5); } + .calendar .calendar-today { + background-color: #2777ff; + font-weight: 800; + color: #ffffff !important; } + .calendar .calendar-today:hover, .calendar .calendar-today:focus { + background-color: #3681ff; + color: inherit; } + .calendar .calendar-today:active, .calendar .calendar-today:selected { + background-color: #2777ff; + color: inherit; } + .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { + background-color: #3681ff; + color: inherit; } + .calendar .calendar-day-with-events { + background-image: url("assets/calendar-today.svg"); + background-size: contain; } .calendar .calendar-week-number { - font-size: 6pt; + font-size: 7pt; font-weight: bold; - height: 1.8em; - width: 2.3em; - border-radius: 2px; + font-feature-settings: "tnum"; margin: 6px; + padding: 0 6px; + border-radius: 3px; background-color: #1e2128; - color: #fafaf9; } + color: #888a8d; } /* Events */ .events-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2d2f38; padding: 12px; } .events-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .events-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .events-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .events-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #343640; } .events-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .events-button .events-box { spacing: 6px; } .events-button .events-list { spacing: 12px; } .events-button .events-title { - color: #878787; - font-weight: bold; + color: #888a8d; margin-bottom: 4px; } .events-button .event-time { - color: #bebeb6; - font-feature-settings: "tnum"; - font-size: 9pt; } + color: #888a8d; } /* World clocks */ .world-clocks-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2d2f38; padding: 12px; } .world-clocks-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .world-clocks-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .world-clocks-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .world-clocks-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #343640; } .world-clocks-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .world-clocks-button .world-clocks-grid { spacing-rows: 6px; spacing-columns: 12px; } .world-clocks-button .world-clocks-header { - color: #878787; - font-weight: bold; } + color: #888a8d; } .world-clocks-button .world-clocks-city { - color: #eeeeec; - font-size: 10pt; - font-weight: normal; } + color: #eeeeec; } .world-clocks-button .world-clocks-time { - font-weight: bold; - color: #eeeeec; - font-feature-settings: "tnum"; - font-size: 10pt; } + color: #eeeeec; } .world-clocks-button .world-clocks-time:ltr { text-align: right; } .world-clocks-button .world-clocks-time:rtl { text-align: left; } .world-clocks-button .world-clocks-timezone { - color: #bebeb6; - font-feature-settings: "tnum"; - font-size: 9pt; } + color: #888a8d; } /* Weather */ .weather-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2d2f38; padding: 12px; } .weather-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .weather-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .weather-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .weather-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #343640; } .weather-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .weather-button .weather-box { spacing: 10px; } .weather-button .weather-header-box { spacing: 6px; } .weather-button .weather-header { - color: #878787; - font-weight: bold; } + color: #888a8d; } .weather-button .weather-header.location { - font-weight: normal; - font-size: 9pt; } + font-weight: normal; } .weather-button .weather-grid { spacing-rows: 6px; spacing-columns: 12px; } .weather-button .weather-forecast-time { color: #a6a69b; - font-feature-settings: "tnum"; - font-size: 8pt; - font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } .weather-button .weather-forecast-icon { icon-size: 2.18em; } - .weather-button .weather-forecast-temp { - font-weight: bold; } /* Message List */ .message-list { - width: 31.5em; - padding: 0 12px; } + width: 32em; + border: solid #0d0e11; } + .message-list:ltr { + margin-left: 0; + margin-right: 4px; + padding-right: 6px; + border-right-width: 1px; } + .message-list:rtl { + margin-right: 0; + margin-left: 4px; + padding-left: 6px; + border-left-width: 1px; } .message-list .message-list-placeholder { - spacing: 12px; } + color: rgba(136, 138, 141, 0.5); } + .message-list .message-list-placeholder > StIcon { + icon-size: 3.27em; + margin-bottom: 12px; + -st-icon-style: symbolic; } .message-list-sections { spacing: 6px; - margin: 0 16px; } + margin: 0; + padding-bottom: 6px; } + .message-list-sections:ltr { + margin-right: 12px; } + .message-list-sections:rtl { + margin-left: 12px; } .message-list-section, .message-list-section-list { spacing: 6px; } .message-list-controls { - margin: 8px 16px 0; - padding: 4px; - spacing: 12px; } + padding: 6px; + spacing: 6px; } .message-list-controls .dnd-button { border-width: 2px; border-color: transparent; - border-radius: 99px; + border-radius: 32px; border-style: solid; } .message-list-controls .dnd-button:focus { border-color: rgba(39, 119, 255, 0.6); } .message { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #2d2f38; } .message:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .message:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .message:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .message:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #343640; } .message:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .message .message-icon-bin { - padding: 18px 0 18px 12px; } + padding: 18px; + padding-right: 6px; } .message .message-icon-bin:rtl { - padding: 18px 12px 18px 0; } + padding-right: 6px; } .message .message-icon-bin > StIcon { icon-size: 2.18em; -st-icon-style: symbolic; } @@ -768,15 +803,18 @@ StScrollBar { width: 1.09em; height: 1.09em; } .message .message-content { - padding: 14px; - spacing: 4px; } + spacing: 4px; + padding: 9px; + margin-bottom: 8px; } .message .message-title { - font-weight: bold; } + font-weight: bold; + /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ + padding-top: 0.57em; } .message .message-secondary-bin { padding: 0 8px; } .message .message-secondary-bin > .event-time { color: rgba(238, 238, 236, 0.5); - font-size: 8pt; + font-size: 9pt; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } .message .message-secondary-bin > .event-time:ltr { @@ -784,11 +822,15 @@ StScrollBar { .message .message-secondary-bin > .event-time:rtl { text-align: left; } .message .message-close-button { - color: white; } + color: #eeeeec; + background-color: rgba(238, 238, 236, 0.1); + border-radius: 99px; + padding: 5px; + margin: 1px; } .message .message-close-button:hover { - color: #d6d6d1; } + background-color: rgba(238, 238, 236, 0.2); } .message .message-close-button:active { - color: #bebeb6; } + background-color: rgba(238, 238, 236, 0.1); } .message .message-body { color: #d6d6d1; } @@ -797,75 +839,87 @@ StScrollBar { /* Media Controls */ .message-media-control { - padding: 12px 1.64em; - color: #cacac4; } + padding: 0 18px; + margin: 12px 0; + border-radius: 8px; + color: #eeeeec; } .message-media-control:hover { - background-color: #383d4b; + background-color: #363a48; color: #eeeeec; } .message-media-control:active { - background-color: #292c37; + background-color: #3b3f4e; color: #eeeeec; } .message-media-control:insensitive { - color: #8e8e80; } + color: #959799; } .message-media-control:last-child:ltr { - border-radius: 0 10px 10px 0; } + margin-right: 12px; } .message-media-control:last-child:rtl { - border-radius: 10px 0 0 10px; } + margin-left: 12px; } .media-message-cover-icon { - icon-size: 2.18em !important; + icon-size: 3.27em !important; border-radius: 8px; } .media-message-cover-icon.fallback { color: #c5c5be; background-color: #23252e; border: 1px solid transparent; border-radius: 8px; - icon-size: 2.18em !important; } + icon-size: 2.18em !important; + padding: 14px; } .candidate-popup-content { - padding: 0.5em; - spacing: 0.3em; } + padding: 6px; + spacing: 6px; } .candidate-index { - padding: 0 0.5em 0 0; - color: #d6d6d1; } + padding: 0; + padding-right: 6px; + color: #888a8d; } .candidate-box { - padding: 0.3em 0.5em 0.3em 0.5em; + padding: 6px 12px 6px 12px; border-radius: 8px; } - .candidate-box:selected, .candidate-box:hover { + .candidate-box:selected { background-color: #2777ff; color: #ffffff; } + .candidate-box:hover { + background-color: #2b2f3a; + color: #f8f8f7; } .candidate-page-button-box { height: 2em; } .vertical .candidate-page-button-box { - padding-top: 0.5em; } + padding-top: 12px; } .horizontal .candidate-page-button-box { - padding-left: 0.5em; } + padding-left: 12px; } .candidate-page-button { - padding: 4px; } + padding: 6px; } .candidate-page-button-previous { border-radius: 8px 0px 0px 8px; - border-right-width: 0; } + border-right-width: 0; + box-shadow: none; } .candidate-page-button-next { - border-radius: 0px 8px 8px 0px; } + border-radius: 0px 8px 8px 0px; + box-shadow: none; } .candidate-page-button-icon { - icon-size: 1em; } + icon-size: 1.09em; } /* Notifications & Message Tray */ .notification-banner { min-height: 64px; - width: 34em; } + width: 34em; + box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.1); + border-radius: 12px; + margin: 4px; } .notification-banner .notification-actions { spacing: 0; } .summary-source-counter { - font-size: 9pt; + font-size: 10pt; font-weight: bold; height: 1.6em; width: 1.6em; @@ -904,7 +958,7 @@ StScrollBar { .chat-meta-message { padding-left: 4px; - font-size: 8pt; + font-size: 9pt; font-weight: bold; color: white; } .chat-meta-message:rtl { @@ -916,15 +970,10 @@ StScrollBar { padding: 0 4px; } /* Modal Dialogs */ -.headline { - font-size: 11pt; } - -.modal-dialog { - border-radius: 16px; } - .modal-dialog .modal-dialog-content-box { - margin: 32px 40px; - spacing: 32px; - max-width: 28em; } +.modal-dialog .modal-dialog-content-box { + margin: 32px 40px; + spacing: 32px; + max-width: 28em; } /* End Session Dialog */ .end-session-dialog { @@ -937,12 +986,7 @@ StScrollBar { .message-dialog-content { spacing: 18px; } .message-dialog-content .message-dialog-title { - text-align: center; - font-size: 18pt; - font-weight: 800; } - .message-dialog-content .message-dialog-title.lightweight { - font-size: 13pt; - font-weight: 800; } + text-align: center; } .message-dialog-content .message-dialog-description { text-align: center; } @@ -950,8 +994,7 @@ StScrollBar { .dialog-list { spacing: 18px; } .dialog-list .dialog-list-title { - text-align: center; - font-weight: bold; } + text-align: center; } .dialog-list .dialog-list-scrollview { max-height: 200px; } .dialog-list .dialog-list-box { @@ -961,8 +1004,7 @@ StScrollBar { .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { font-weight: bold; } .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { - color: #e2e2df; - font-size: 9pt; } + color: #e2e2df; } /* Run Dialog */ .run-dialog .modal-dialog-content-box { @@ -973,7 +1015,6 @@ StScrollBar { width: 20em; } .run-dialog .run-dialog-description { - font-size: 9pt; text-align: center; color: #bebeb6; } @@ -1002,8 +1043,7 @@ StScrollBar { .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { - text-align: center; - font-size: 9pt; } + text-align: center; } .prompt-dialog-error-label { color: #fd7d00; } @@ -1024,10 +1064,9 @@ StScrollBar { spacing: 20px; } .audio-selection-device { - border: 1px solid #181a20; - border-radius: 12px; } + border-radius: 16px; } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: #2e313d; } + background-color: #2b2f3a; } .audio-selection-device:active { background-color: #2777ff; color: #ffffff; } @@ -1047,7 +1086,7 @@ StScrollBar { height: 300px; width: 300px; } -/* Network Dialogs */ +/* Select Network dialogs */ .nm-dialog { max-height: 34em; min-height: 31em; @@ -1057,18 +1096,8 @@ StScrollBar { spacing: 20px; padding: 24px; } -.nm-dialog-airplane-box { - spacing: 12px; } - -.nm-dialog-airplane-headline { - font-weight: bold; - text-align: center; } - -.nm-dialog-airplane-text { - color: #eeeeec; } - -.nm-dialog-header { - font-weight: bold; } +.nm-dialog-subheader { + color: #888a8d; } .nm-dialog-header-icon { icon-size: 2.18em; } @@ -1077,18 +1106,18 @@ StScrollBar { spacing: 10px; } .nm-dialog-scroll-view { - border: 1px solid #0d0e11; - padding: 0; - background-color: #1c1e25; } + padding: 6px; + border-radius: 8px; + background-color: #272a34; } .nm-dialog-item { - font-size: 10pt; - border-bottom: 1px solid #0d0e11; - padding: 12px; - spacing: 0px; } + padding: 12px; } .nm-dialog-item:selected { background-color: #2777ff; + border-radius: 5px; color: #ffffff; } + .nm-dialog-item:hover { + background-color: #2b2f3a; } .nm-dialog-icon { icon-size: 1.09em; } @@ -1096,31 +1125,51 @@ StScrollBar { .nm-dialog-icons { spacing: 12px; } +.no-networks-box { + spacing: 6px; } + .no-networks-label { color: #888a8d; } -.no-networks-box { - spacing: 6px; } +.nm-dialog-airplane-box { + text-align: center; + spacing: 12px; } + +.nm-dialog-airplane-text { + color: #888a8d; } /* OSD */ .osd-window { text-align: center; font-weight: bold; spacing: 12px; - margin: 32px; - min-width: 64px; - min-height: 64px; } + padding: 12px 18px; + margin-bottom: 4em; } + .osd-window > * { + spacing: 8px; } .osd-window StIcon { - icon-size: 6.54em; } + icon-size: 2.18em; } .osd-window .osd-monitor-label { font-size: 3em; } + .osd-window StLabel:ltr { + margin-right: 6px; } + .osd-window StLabel:rtl { + margin-left: 6px; } .osd-window .level { - height: 8px; - -barlevel-height: 8px; + margin-bottom: 4px; + height: 6px; + min-width: 10.9em; + -barlevel-height: 6px; -barlevel-background-color: rgba(255, 255, 255, 0.1); -barlevel-active-background-color: white; -barlevel-overdrive-color: #a61414; -barlevel-overdrive-separator-width: 3px; } + .osd-window .level:first-child { + margin-bottom: 0px; } + .osd-window .level:ltr { + margin-right: 6px; } + .osd-window .level:rtl { + margin-left: 6px; } /* Pad OSD */ .pad-osd-window { @@ -1136,38 +1185,52 @@ StScrollBar { /* App Switcher */ .switcher-popup { - padding: 8px; + padding: 0; spacing: 24px; } -.switcher-list .item-box { - padding: 8px; - border-radius: 9px; - border: 1px solid transparent; } - .switcher-list .item-box:outlined { - background-color: rgba(255, 255, 255, 0.3); } - .switcher-list .item-box:selected { - background-color: rgba(255, 255, 255, 0.3); - color: white; } - -.switcher-list .thumbnail-box { - padding: 2px; - spacing: 6px; } - -.switcher-list .thumbnail { - width: 256px; } - -.switcher-list .separator { - width: 1px; - background: #0d0e11; } - -.switcher-list .switcher-list-item-container { - spacing: 12px; } +.switcher-list { + padding: 10px; + border-radius: 24px; + box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1); } + .switcher-list .switcher-list-item-container { + spacing: 12px; } + .switcher-list .item-box { + background-color: transparent; } + .switcher-list .item-box:hover { + background-color: rgba(255, 255, 255, 0.1); } + .switcher-list .item-box:selected, .switcher-list .item-box:focus { + background-color: rgba(255, 255, 255, 0.13); } + .switcher-list .item-box:selected:hover, .switcher-list .item-box:focus:hover { + background-color: rgba(255, 255, 255, 0.16); } + .switcher-list .item-box:selected:active, .switcher-list .item-box:focus:active { + background-color: rgba(255, 255, 255, 0.13); } + .switcher-list .item-box:active { + background-color: rgba(255, 255, 255, 0.16); } + .switcher-list .item-box:outlined, .switcher-list .item-box:checked { + background-color: rgba(255, 255, 255, 0.19); } + .switcher-list .item-box:outlined:active, .switcher-list .item-box:checked:active { + background-color: rgba(255, 255, 255, 0.22); } + .switcher-list .item-box:outlined:hover, .switcher-list .item-box:checked:hover { + background-color: rgba(255, 255, 255, 0.25); } + .switcher-list .item-box:drop { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } + .switcher-list .separator { + width: 1px; + background: #0d0e11; } + .switcher-list .thumbnail-box { + padding: 2px; + spacing: 6px; } + .switcher-list .thumbnail { + width: 256px; + border-radius: 8px; } .switcher-arrow { - border-color: rgba(0, 0, 0, 0); - color: rgba(238, 238, 236, 0.8); } + border-color: rgba(255, 255, 255, 0.8); + color: rgba(255, 255, 255, 0.8); } .switcher-arrow:highlighted { - color: #eeeeec; } + border-color: white; + color: white; } .input-source-switcher-symbol { font-size: 34pt; @@ -1178,54 +1241,173 @@ StScrollBar { border: 5px solid #2777ff; } /* Workspace Switcher */ -.workspace-switcher-group { - padding: 12px; } - .workspace-switcher { - background: transparent; - border: none; - border-radius: 0; - padding: 0; + margin-bottom: 4em; + spacing: 12px; + padding: 12px 18px; } + +.ws-switcher-indicator { + background-color: rgba(255, 255, 255, 0.5); + padding: 0.1816666667em; + margin: 0.9083333333em; + border-radius: 2.18em; } + .ws-switcher-indicator:active { + background-color: white; + padding: 0.3633333333em; + margin: 0.7266666667em; } + +.icon-label-button-container { + spacing: 6px; } + .icon-label-button-container StIcon { + icon-size: 32px; } + +.screenshot-ui-panel { + border-radius: 37px; + padding: 18px; + padding-bottom: 12px; + margin-bottom: 4em; spacing: 12px; } -.ws-switcher-box { - background: transparent; - height: 50px; - background-size: 32px; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 11px; } +.screenshot-ui-close-button { + padding: 6px; } + .screenshot-ui-close-button.left { + margin-left: 8px; } + .screenshot-ui-close-button.right { + margin-right: 8px; } -.ws-switcher-active-up, -.ws-switcher-active-down, -.ws-switcher-active-left, -.ws-switcher-active-right { - height: 52px; - background-color: #2777ff; - border: 1px solid #4187ff; - border-radius: 11px; - color: #ffffff; } +.screenshot-ui-type-button { + padding: 12px 18px !important; + border-radius: 19px; } + +.screenshot-ui-capture-button { + width: 36px; + height: 36px; + border-radius: 99px; + border: 4px white; + padding: 4px; } + .screenshot-ui-capture-button .screenshot-ui-capture-button-circle { + background-color: white; + transition-duration: 200ms; + border-radius: 99px; } + .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus { + background-color: #2b2f3a; } + .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { + background-color: #d9d9d9; } + .screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle { + background-color: gray; } + .screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle { + background-color: #bf1717; } + .screenshot-ui-capture-button:cast:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:cast:focus .screenshot-ui-capture-button-circle { + background-color: #7b0f0f; } + .screenshot-ui-capture-button:cast:active .screenshot-ui-capture-button-circle { + background-color: #360707; } + +.screenshot-ui-shot-cast-container { + background-color: #2b2f3a; + border-radius: 16px; + padding: 3px; + spacing: 3px; } + .screenshot-ui-shot-cast-container:ltr { + margin-left: 3px; } + .screenshot-ui-shot-cast-container:rtl { + margin-right: 3px; } + +.screenshot-ui-shot-cast-button { + padding: 6px 12px; + background-color: transparent; + border-radius: 13px; } + .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { + background-color: #363a48; } + .screenshot-ui-shot-cast-button:active { + background-color: #3b3f4e; } + .screenshot-ui-shot-cast-button:checked { + background-color: white; + color: black; } + .screenshot-ui-shot-cast-button StIcon { + icon-size: 1.09em; } + +.screenshot-ui-show-pointer-button { + border-radius: 99px; + padding: 12px !important; } + .screenshot-ui-show-pointer-button StIcon { + icon-size: 1.09em; } + +.screenshot-ui-area-indicator-shade { + background-color: rgba(0, 0, 0, 0.3); } + +.screenshot-ui-area-selector .screenshot-ui-area-indicator-shade { + background-color: rgba(0, 0, 0, 0.5); } + +.screenshot-ui-area-selector .screenshot-ui-area-indicator-selection { + border: 2px white; } + +.screenshot-ui-area-selector-handle { + border-radius: 99px; + background-color: white; + box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.2); + width: 24px; + height: 24px; } + +.screenshot-ui-window-selector { + background-color: #272a34; } + .screenshot-ui-window-selector .screenshot-ui-window-selector-window-container { + margin: 100px; } + .screenshot-ui-window-selector:primary-monitor .screenshot-ui-window-selector-window-container { + margin-bottom: 200px; } + +.screenshot-ui-window-selector-window-border { + transition-duration: 200ms; + border-radius: 16px; + border: 6px transparent; } + +.screenshot-ui-window-selector-check { + transition-duration: 200ms; + color: transparent; + border-radius: 99px; + border-width: 12px; + icon-size: 24px; } + +.screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border { + border-color: #0051da; } + +.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border { + border-color: #2777ff; + background-color: rgba(39, 119, 255, 0.2); } + +.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check { + color: white; + background-color: #2777ff; } + +.screenshot-ui-screen-selector { + transition-duration: 200ms; + background-color: rgba(0, 0, 0, 0.5); } + .screenshot-ui-screen-selector:hover { + background-color: rgba(0, 0, 0, 0.3); } + .screenshot-ui-screen-selector:active { + background-color: rgba(0, 0, 0, 0.7); } + .screenshot-ui-screen-selector:checked { + background-color: transparent; + border: 2px white; } + +.screenshot-ui-tooltip { + color: white; + background-color: #303340; + border-radius: 99px; + padding: 6px 12px; + text-align: center; + -y-offset: 24px; } /* Top Bar */ #panel { background-color: #000; font-weight: bold; height: 2.2em; - font-feature-settings: "tnum"; transition-duration: 250ms; } #panel.unlock-screen, #panel.login-screen, #panel:overview { background-color: transparent; } - #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel:overview .panel-corner { - -panel-corner-opacity: 0; } - #panel .panel-corner { - -panel-corner-radius: 9px; - -panel-corner-background-color: #000; - -panel-corner-border-width: 2px; - -panel-corner-border-color: transparent; - -panel-corner-opacity: 1; - transition-duration: 250ms; } #panel .panel-button { font-weight: bold; - color: #ddd; + color: #e2e2df; -natural-hpadding: 12px; -minimum-hpadding: 6px; transition-duration: 150ms; @@ -1235,12 +1417,36 @@ StScrollBar { transition-duration: 150ms; border: 3px solid transparent; border-radius: 99px; } - #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } - #panel .panel-button:hover.clock-display, #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display { + #panel .panel-button.screen-recording-indicator { + box-shadow: inset 0 0 0 100px #bf1717; } + #panel .panel-button.screen-recording-indicator StBoxLayout { + spacing: 6px; } + #panel .panel-button.screen-recording-indicator StIcon { + icon-size: 1.09em; } + #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { + box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.2); } + #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display { box-shadow: none; } - #panel .panel-button:hover.clock-display .clock, #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.2); } + #panel .panel-button:active.screen-recording-indicator, #panel .panel-button:overview.screen-recording-indicator, #panel .panel-button:focus.screen-recording-indicator, #panel .panel-button:checked.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.85); } + #panel .panel-button:hover { + box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.15); } + #panel .panel-button:hover.clock-display { + box-shadow: none; } + #panel .panel-button:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.15); } + #panel .panel-button:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.9); } + #panel .panel-button:active:hover, #panel .panel-button:overview:hover, #panel .panel-button:focus:hover, #panel .panel-button:checked:hover { + box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.25); } + #panel .panel-button:active:hover.clock-display, #panel .panel-button:overview:hover.clock-display, #panel .panel-button:focus:hover.clock-display, #panel .panel-button:checked:hover.clock-display { + box-shadow: none; } + #panel .panel-button:active:hover.clock-display .clock, #panel .panel-button:overview:hover.clock-display .clock, #panel .panel-button:focus:hover.clock-display .clock, #panel .panel-button:checked:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.25); } + #panel .panel-button:active:hover.screen-recording-indicator, #panel .panel-button:overview:hover.screen-recording-indicator, #panel .panel-button:focus:hover.screen-recording-indicator, #panel .panel-button:checked:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.8); } #panel .panel-button .system-status-icon { icon-size: 1.09em; padding: 5px; @@ -1252,12 +1458,30 @@ StScrollBar { -st-icon-style: symbolic; } #panel .panel-button#panelActivities { -natural-hpadding: 18px; } - #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked { + #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } - #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display { + #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display { box-shadow: none; } - #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock { + #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } + #panel.unlock-screen .panel-button:active.screen-recording-indicator, #panel.unlock-screen .panel-button:overview.screen-recording-indicator, #panel.unlock-screen .panel-button:focus.screen-recording-indicator, #panel.unlock-screen .panel-button:checked.screen-recording-indicator, #panel.login-screen .panel-button:active.screen-recording-indicator, #panel.login-screen .panel-button:overview.screen-recording-indicator, #panel.login-screen .panel-button:focus.screen-recording-indicator, #panel.login-screen .panel-button:checked.screen-recording-indicator, #panel:overview .panel-button:active.screen-recording-indicator, #panel:overview .panel-button:overview.screen-recording-indicator, #panel:overview .panel-button:focus.screen-recording-indicator, #panel:overview .panel-button:checked.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.85); } + #panel.unlock-screen .panel-button:hover, #panel.login-screen .panel-button:hover, #panel:overview .panel-button:hover { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); } + #panel.unlock-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel:overview .panel-button:hover.clock-display { + box-shadow: none; } + #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); } + #panel.unlock-screen .panel-button:hover.screen-recording-indicator, #panel.login-screen .panel-button:hover.screen-recording-indicator, #panel:overview .panel-button:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.9); } + #panel.unlock-screen .panel-button:active:hover, #panel.unlock-screen .panel-button:overview:hover, #panel.unlock-screen .panel-button:focus:hover, #panel.unlock-screen .panel-button:checked:hover, #panel.login-screen .panel-button:active:hover, #panel.login-screen .panel-button:overview:hover, #panel.login-screen .panel-button:focus:hover, #panel.login-screen .panel-button:checked:hover, #panel:overview .panel-button:active:hover, #panel:overview .panel-button:overview:hover, #panel:overview .panel-button:focus:hover, #panel:overview .panel-button:checked:hover { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel.unlock-screen .panel-button:active:hover.clock-display, #panel.unlock-screen .panel-button:overview:hover.clock-display, #panel.unlock-screen .panel-button:focus:hover.clock-display, #panel.unlock-screen .panel-button:checked:hover.clock-display, #panel.login-screen .panel-button:active:hover.clock-display, #panel.login-screen .panel-button:overview:hover.clock-display, #panel.login-screen .panel-button:focus:hover.clock-display, #panel.login-screen .panel-button:checked:hover.clock-display, #panel:overview .panel-button:active:hover.clock-display, #panel:overview .panel-button:overview:hover.clock-display, #panel:overview .panel-button:focus:hover.clock-display, #panel:overview .panel-button:checked:hover.clock-display { + box-shadow: none; } + #panel.unlock-screen .panel-button:active:hover.clock-display .clock, #panel.unlock-screen .panel-button:overview:hover.clock-display .clock, #panel.unlock-screen .panel-button:focus:hover.clock-display .clock, #panel.unlock-screen .panel-button:checked:hover.clock-display .clock, #panel.login-screen .panel-button:active:hover.clock-display .clock, #panel.login-screen .panel-button:overview:hover.clock-display .clock, #panel.login-screen .panel-button:focus:hover.clock-display .clock, #panel.login-screen .panel-button:checked:hover.clock-display .clock, #panel:overview .panel-button:active:hover.clock-display .clock, #panel:overview .panel-button:overview:hover.clock-display .clock, #panel:overview .panel-button:focus:hover.clock-display .clock, #panel:overview .panel-button:checked:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel.unlock-screen .panel-button:active:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:overview:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:focus:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:checked:hover.screen-recording-indicator, #panel.login-screen .panel-button:active:hover.screen-recording-indicator, #panel.login-screen .panel-button:overview:hover.screen-recording-indicator, #panel.login-screen .panel-button:focus:hover.screen-recording-indicator, #panel.login-screen .panel-button:checked:hover.screen-recording-indicator, #panel:overview .panel-button:active:hover.screen-recording-indicator, #panel:overview .panel-button:overview:hover.screen-recording-indicator, #panel:overview .panel-button:focus:hover.screen-recording-indicator, #panel:overview .panel-button:checked:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.8); } #panel .panel-status-indicators-box, #panel .panel-status-menu-box { spacing: 2px; } @@ -1276,6 +1500,12 @@ StScrollBar { padding: 0 6px; spacing: 6px; } +.clock-display-box { + spacing: 2px; } + .clock-display-box .clock { + padding-left: 12px; + padding-right: 12px; } + /* Activities Ripple */ .ripple-box { background-color: rgba(243, 247, 255, 0.3); @@ -1306,22 +1536,21 @@ StScrollBar { border-radius: 99px; padding: 6px 12px; } -.window-close { - background-color: #303340; +.window-close, .screenshot-ui-close-button { + background-color: rgba(41, 44, 55, 0.95); color: white; border-radius: 21px; padding: 3px; height: 30px; width: 30px; - box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5); transition-duration: 300ms; } - .window-close StIcon { + .window-close StIcon, .screenshot-ui-close-button StIcon { icon-size: 24px; } - .window-close:hover { - background-color: #51576b; } - .window-close:active { + .window-close:hover, .screenshot-ui-close-button:hover { + background-color: rgba(76, 79, 88, 0.9575); } + .window-close:active, .screenshot-ui-close-button:active { color: rgba(255, 255, 255, 0.8); - background-color: #252831; } + background-color: rgba(30, 33, 40, 0.95); } .workspace-background { border-radius: 30px; @@ -1329,30 +1558,35 @@ StScrollBar { .search-entry { - width: 320px; - padding: 7px 9px; border-radius: 18px; - color: rgba(238, 238, 236, 0.7); - background-color: #23252e; margin-top: 12px; margin-bottom: 6px; - border-width: 2px; - border-color: transparent; } + padding: 7px 9px; + width: 320px; + background-color: #2e313d; + color: rgba(238, 238, 236, 0.7); + border: 2px solid #2e313d; } .search-entry:hover { - background-color: #2e313d; - color: #fafaf9; } + background-color: #363a48; + border-color: #363a48; + color: rgba(238, 238, 236, 0.7); } .search-entry:focus { - border-style: solid; + background-color: #2d3546; border-color: #2777ff; - color: #eeeeec; - box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); } + color: #eeeeec; } + + .search-entry:insensitive { + background-color: #2f3340; + border-color: #2f3340; + color: #888a8d; } .search-entry .search-entry-icon { + color: inherit; icon-size: 1.09em; - padding: 0 4px; - color: inherit; } + margin-top: 2px; + padding: 0 4px; } /* Search */ #searchResultsContent { @@ -1362,25 +1596,42 @@ StScrollBar { .search-section { spacing: 8px; } .search-section .search-section-separator { - height: 0; + height: 8px; background-color: transparent; } .search-section-content { - background-color: rgba(59, 63, 78, 0.8); - border-radius: 19px; + background-color: #323643; + border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); + box-shadow: none; + text-shadow: none; color: white; - padding: 18px; - spacing: 8px; } + padding: 12px; + margin: 4px; } -.list-search-result:focus, .search-provider-icon:focus, .list-search-result:hover, .search-provider-icon:hover, .list-search-result:selected, .search-provider-icon:selected { - background-color: rgba(255, 255, 255, 0.1); - transition-duration: 200ms; } - -.list-search-result:active, .search-provider-icon:active, .list-search-result:checked, .search-provider-icon:checked { - background-color: rgba(26, 28, 35, 0.9); } +.list-search-result, .search-provider-icon { + background-color: transparent; + margin: 4px; + border-radius: 8px !important; } + .list-search-result:hover, .search-provider-icon:hover { + background-color: rgba(255, 255, 255, 0.1); } + .list-search-result:selected, .search-provider-icon:selected, .list-search-result:focus, .search-provider-icon:focus { + background-color: rgba(255, 255, 255, 0.13); } + .list-search-result:selected:hover, .search-provider-icon:selected:hover, .list-search-result:focus:hover, .search-provider-icon:focus:hover { + background-color: rgba(255, 255, 255, 0.16); } + .list-search-result:selected:active, .search-provider-icon:selected:active, .list-search-result:focus:active, .search-provider-icon:focus:active { + background-color: rgba(255, 255, 255, 0.13); } + .list-search-result:active, .search-provider-icon:active { + background-color: rgba(255, 255, 255, 0.16); } + .list-search-result:outlined, .search-provider-icon:outlined, .list-search-result:checked, .search-provider-icon:checked { + background-color: rgba(255, 255, 255, 0.19); } + .list-search-result:outlined:active, .search-provider-icon:outlined:active, .list-search-result:checked:active, .search-provider-icon:checked:active { + background-color: rgba(255, 255, 255, 0.22); } + .list-search-result:outlined:hover, .search-provider-icon:outlined:hover, .list-search-result:checked:hover, .search-provider-icon:checked:hover { + background-color: rgba(255, 255, 255, 0.25); } + .list-search-result:drop, .search-provider-icon:drop { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } .grid-search-results { spacing: 36px; } @@ -1389,8 +1640,7 @@ StScrollBar { spacing: 12px; } .search-provider-icon .list-search-provider-content .list-search-provider-details { width: 120px; - margin-top: 0; - color: #ebebeb; } + color: white; } .list-search-results { spacing: 6px; } @@ -1402,13 +1652,11 @@ StScrollBar { spacing: 12px; } .list-search-result .list-search-result-description { - color: #b3b3b3; } + color: #97999f; } /* Dash */ #dash { - font-size: 8pt; - margin-top: 18px; - padding: 0 10px; } + margin: 2em; } #dash .placeholder { background-image: none; background-size: contain; @@ -1416,22 +1664,49 @@ StScrollBar { #dash .empty-dash-drop-target { width: 32px; height: 32px; } - #dash .overview-icon { - padding: 5px; } + #dash .app-well-app-running-dot { + margin-bottom: 15px; } .dash-background { - background-color: #3b3b3b; - margin-bottom: 16px; - padding: 10px; - border-radius: 24px; } + background-color: #323643; + border-radius: 28px; + padding: 12px; + spacing: 6px; } -.dash-item-container .app-well-app, .show-apps { - padding: 10px 1.5px 26px; } +.dash-item-container .app-well-app .overview-icon, .dash-item-container .grid-search-result .overview-icon { + margin: 0 4px; + padding: 6px; } + +.dash-item-container .show-apps .overview-icon { + background-color: transparent; } + +.dash-item-container .show-apps:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.1); } + +.dash-item-container .show-apps:selected .overview-icon, .dash-item-container .show-apps:focus .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + .dash-item-container .show-apps:selected .overview-icon:hover .overview-icon, .dash-item-container .show-apps:focus .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + .dash-item-container .show-apps:selected .overview-icon:active .overview-icon, .dash-item-container .show-apps:focus .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + +.dash-item-container .show-apps:active .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + +.dash-item-container .show-apps:outlined .overview-icon, .dash-item-container .show-apps:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + .dash-item-container .show-apps:outlined .overview-icon:active .overview-icon, .dash-item-container .show-apps:checked .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.22); } + .dash-item-container .show-apps:outlined .overview-icon:hover .overview-icon, .dash-item-container .show-apps:checked .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.25); } + +.dash-item-container .show-apps:drop .overview-icon { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } .dash-separator { width: 1px; - margin: 0 6.5px 16px; - background-color: rgba(255, 255, 255, 0.3); } + background-color: #0d0e11; } .dash-label { color: white; @@ -1439,27 +1714,7 @@ StScrollBar { border-radius: 99px; padding: 6px 12px; text-align: center; - -y-offset: 12px; } - -.show-apps .overview-icon { - color: white; } - -.show-apps:hover .overview-icon, .show-apps:selected .overview-icon { - background-color: rgba(255, 255, 255, 0.1); } - -.show-apps:focus .overview-icon { - background-color: rgba(255, 255, 255, 0.3); } - -.show-apps:drop .overview-icon { - border: 2px solid #2777ff; - background-color: rgba(39, 119, 255, 0.2); } - -.show-apps:active .overview-icon, .show-apps:checked .overview-icon { - background-color: rgba(26, 28, 35, 0.5); } - -.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { - background-color: rgba(48, 51, 64, 0.5); - color: #eeeeec; } + -y-offset: 8px; } /* App Grid */ .icon-grid { @@ -1473,64 +1728,108 @@ StScrollBar { page-padding-right: 12px; } /* App Icons */ -.app-well-app .overview-icon, -.grid-search-result .overview-icon { - color: #fff; } +.app-well-app .overview-icon, .grid-search-result .overview-icon { + background-color: transparent; } -.app-well-app:hover .overview-icon, .app-well-app:selected .overview-icon, -.grid-search-result:hover .overview-icon, -.grid-search-result:selected .overview-icon { +.app-well-app:hover .overview-icon, .grid-search-result:hover .overview-icon { background-color: rgba(255, 255, 255, 0.1); } -.app-well-app:focus .overview-icon, -.grid-search-result:focus .overview-icon { - background-color: rgba(255, 255, 255, 0.3); } +.app-well-app:selected .overview-icon, .grid-search-result:selected .overview-icon, .app-well-app:focus .overview-icon, .grid-search-result:focus .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + .app-well-app:selected .overview-icon:hover .overview-icon, .grid-search-result:selected .overview-icon:hover .overview-icon, .app-well-app:focus .overview-icon:hover .overview-icon, .grid-search-result:focus .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + .app-well-app:selected .overview-icon:active .overview-icon, .grid-search-result:selected .overview-icon:active .overview-icon, .app-well-app:focus .overview-icon:active .overview-icon, .grid-search-result:focus .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } -.app-well-app:drop .overview-icon, -.grid-search-result:drop .overview-icon { - border: 2px solid #2777ff; +.app-well-app:active .overview-icon, .grid-search-result:active .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + +.app-well-app:outlined .overview-icon, .grid-search-result:outlined .overview-icon, .app-well-app:checked .overview-icon, .grid-search-result:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + .app-well-app:outlined .overview-icon:active .overview-icon, .grid-search-result:outlined .overview-icon:active .overview-icon, .app-well-app:checked .overview-icon:active .overview-icon, .grid-search-result:checked .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.22); } + .app-well-app:outlined .overview-icon:hover .overview-icon, .grid-search-result:outlined .overview-icon:hover .overview-icon, .app-well-app:checked .overview-icon:hover .overview-icon, .grid-search-result:checked .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.25); } + +.app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon { + border: 2px solid rgba(39, 119, 255, 0.8); background-color: rgba(39, 119, 255, 0.2); } -.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, -.grid-search-result:active .overview-icon, -.grid-search-result:checked .overview-icon { - background-color: rgba(26, 28, 35, 0.5); } +.app-well-app .overview-icon, .grid-search-result .overview-icon { + padding: 12px; } -.app-well-app .overview-icon.overview-icon-with-label, -.grid-search-result .overview-icon.overview-icon-with-label { - padding: 10px 8px 5px 8px; } - .app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, - .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout { - spacing: 6px; } +.app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout { + spacing: 6px; } -/* App Folders */ -.app-well-app.app-folder { - background-color: #3b3b3b; - border-radius: 12px; } +.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + +.app-well-app.app-folder:hover .overview-icon, .app-folder.grid-search-result:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.1); } + +.app-well-app.app-folder:selected .overview-icon, .app-folder.grid-search-result:selected .overview-icon, .app-well-app.app-folder:focus .overview-icon, .app-folder.grid-search-result:focus .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + .app-well-app.app-folder:selected .overview-icon:hover .overview-icon, .app-folder.grid-search-result:selected .overview-icon:hover .overview-icon, .app-well-app.app-folder:focus .overview-icon:hover .overview-icon, .app-folder.grid-search-result:focus .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + .app-well-app.app-folder:selected .overview-icon:active .overview-icon, .app-folder.grid-search-result:selected .overview-icon:active .overview-icon, .app-well-app.app-folder:focus .overview-icon:active .overview-icon, .app-folder.grid-search-result:focus .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + +.app-well-app.app-folder:active .overview-icon, .app-folder.grid-search-result:active .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + +.app-well-app.app-folder:outlined .overview-icon, .app-folder.grid-search-result:outlined .overview-icon, .app-well-app.app-folder:checked .overview-icon, .app-folder.grid-search-result:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + .app-well-app.app-folder:outlined .overview-icon:active .overview-icon, .app-folder.grid-search-result:outlined .overview-icon:active .overview-icon, .app-well-app.app-folder:checked .overview-icon:active .overview-icon, .app-folder.grid-search-result:checked .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.22); } + .app-well-app.app-folder:outlined .overview-icon:hover .overview-icon, .app-folder.grid-search-result:outlined .overview-icon:hover .overview-icon, .app-well-app.app-folder:checked .overview-icon:hover .overview-icon, .app-folder.grid-search-result:checked .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.25); } + +.app-well-app.app-folder:drop .overview-icon, .app-folder.grid-search-result:drop .overview-icon { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } .app-folder-dialog { - border-radius: 24px; - background-color: #3b3b3b; + border-radius: 32px; + background-color: #323643; padding: 12px 0px 12px 0px; } .app-folder-dialog .folder-name-container { padding: 24px 36px 0; spacing: 12px; /* FIXME: this is to keep the label in sync with the entry */ } - .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry { - font-size: 18pt; - font-weight: 800; } .app-folder-dialog .folder-name-container .folder-name-entry { width: 300px; } .app-folder-dialog .folder-name-container .folder-name-label { padding: 5px 7px; color: white; } .app-folder-dialog .folder-name-container .edit-folder-button { - padding: 0; + background-color: transparent; + background-color: none; width: 36px; height: 36px; border-radius: 18px; } + .app-folder-dialog .folder-name-container .edit-folder-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } + .app-folder-dialog .folder-name-container .edit-folder-button:focus { + color: #eeeeec; + background-color: #2c364c; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .app-folder-dialog .folder-name-container .edit-folder-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .app-folder-dialog .folder-name-container .edit-folder-button:hover { + color: #eeeeec; + background-color: #343640; } + .app-folder-dialog .folder-name-container .edit-folder-button:active { + color: #eeeeec; + background-color: #3b3d49; } .app-folder-dialog .folder-name-container .edit-folder-button > StIcon { - icon-size: 16px; } + icon-size: 1.09em; } .app-folder-dialog .icon-grid { row-spacing: 12px; column-spacing: 30px; @@ -1550,17 +1849,14 @@ StScrollBar { height: 5px; width: 5px; border-radius: 5px; - background-color: white; - margin-bottom: 1px; } + margin-bottom: 8px; + background-color: white; } .rename-folder-popup .rename-folder-popup-item { spacing: 6px; } .rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl { padding: 0 12px; } -.app-menu { - max-width: 27.25em; } - .page-indicator { padding: 6px 12px 0; } .page-indicator .page-indicator-icon { @@ -1586,12 +1882,12 @@ StScrollBar { background-gradient-start: rgba(255, 255, 255, 0.05); background-gradient-end: transparent; background-gradient-direction: horizontal; - border-radius: 15px 0px 0px 15px; } + border-radius: 24px 0px 0px 24px; } .page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl { background-gradient-start: transparent; background-gradient-end: rgba(255, 255, 255, 0.05); background-gradient-direction: horizontal; - border-radius: 0px 15px 15px 0px; } + border-radius: 0px 24px 24px 0px; } .page-navigation-arrow { margin: 6px; @@ -1675,7 +1971,6 @@ StScrollBar { .caps-lock-warning-label { text-align: center; padding-bottom: 8px; - font-size: 9pt; color: #fd7d00; } /* Workspace animation */ @@ -1687,18 +1982,9 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.5); border: 1px solid #2777ff; } -.tile-preview-left.on-primary { - border-radius: 9px 0 0 0; } - -.tile-preview-right.on-primary { - border-radius: 0 9px 0 0; } - -.tile-preview-left.tile-preview-right.on-primary { - border-radius: 9px 9px 0 0; } - /* On-screen Keyboard */ #keyboard { - background-color: rgba(17, 18, 23, 0.9); + background-color: #303340; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); } #keyboard .page-indicator { padding: 6px; } @@ -1711,124 +1997,107 @@ StScrollBar { spacing: 4px; } .keyboard-key { - color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - font-size: 15pt; + font-size: 16pt; + font-weight: bold; min-height: 1.2em; min-width: 1.2em; border-width: 1px; border-style: solid; - border-radius: 11px; } + border-radius: 12px; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3); + color: white; + background-color: #545454; } .keyboard-key:focus { - color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + color: white; + background-color: #35415b; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .keyboard-key:hover, .keyboard-key:checked { - color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + .keyboard-key:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-key:focus:active { + background-color: #434f6d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-key:hover { + color: white; + background-color: #5e5e5e; } .keyboard-key:active { - color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: white; + background-color: #666666; } + .keyboard-key:checked { + color: white; + background-color: #737373; } .keyboard-key:grayed { background-color: #1c1e25; color: white; border-color: black; } .keyboard-key.default-key { - color: #eeeeec; - background-color: #3b3f4e; - border-color: #2b2f3a; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .keyboard-key.default-key:hover, .keyboard-key.default-key:checked { - color: #eeeeec; - background-color: #3f4454; - border-color: #2b2f3a; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + color: white; + background-color: #3b3b3b; + border-radius: 12px; } + .keyboard-key.default-key:hover { + color: white; + background-color: #454545; } .keyboard-key.default-key:active { - color: #eeeeec; - background-color: #2e313d; - border-color: #1c1e25; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: white; + background-color: #4d4d4d; } + .keyboard-key.default-key:checked { + color: white; + background-color: #595959; } .keyboard-key.enter-key { color: #ffffff; background-color: #3681ff; - border-color: #136aff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked { - color: #eeeeec; - background-color: #5091ff; - border-color: #2274ff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + border-radius: 12px; + color: white; } + .keyboard-key.enter-key:hover { + color: #ffffff; + background-color: #4b8eff; } .keyboard-key.enter-key:active { - color: #eeeeec; - background-color: #0e67ff; - border-color: #0054e4; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: #ffffff; + background-color: #5a97ff; } + .keyboard-key.enter-key:checked { + color: #ffffff; + background-color: #74a7ff; } .keyboard-key.shift-key-uppercase { - color: #2777ff; } + background-color: gray; + color: #303340; } + .keyboard-key.shift-key-uppercase:hover { + background-color: #8c8c8c; + color: #3b3f4e; } .keyboard-key StIcon { - icon-size: 1.125em; } + icon-size: 24px; } .keyboard-subkeys { - color: white; -arrow-border-radius: 16px; -arrow-background-color: #303340; -arrow-border-width: 1px; -arrow-border-color: #43495a; -arrow-base: 20px; -arrow-rise: 10px; - -boxpointer-gap: 6px; } + -boxpointer-gap: 6px; + padding: 6px; } .keyboard-subkeys .keyboard-key { - color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - border-radius: 8px; } + color: white; + background-color: #545454; + border-radius: 12px; } .keyboard-subkeys .keyboard-key:focus { - color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + color: white; + background-color: #35415b; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked { - color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + .keyboard-subkeys .keyboard-key:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-subkeys .keyboard-key:focus:active { + background-color: #434f6d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-subkeys .keyboard-key:hover { + color: white; + background-color: #5e5e5e; } .keyboard-subkeys .keyboard-key:active { - color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: white; + background-color: #666666; } + .keyboard-subkeys .keyboard-key:checked { + color: white; + background-color: #737373; } .emoji-page .keyboard-key { background-color: transparent; @@ -1840,44 +2109,84 @@ StScrollBar { background-color: #2777ff; } .word-suggestions { - font-size: 13pt; + font-size: 14pt; spacing: 12px; - min-height: 20pt; } + min-height: 20pt; + padding: 12px; + color: white; } + .word-suggestions StButton { + margin: 0 3px; + min-width: 32px; + border-radius: 6px; + padding: 6px 18px; + background-color: transparent; + background-image: none; } + .word-suggestions StButton:focus { + color: white; + background-color: #35415b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .word-suggestions StButton:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .word-suggestions StButton:focus:active { + background-color: #434f6d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .word-suggestions StButton:hover { + color: white; + background-color: #5e5e5e; } + .word-suggestions StButton:active { + color: white; + background-color: #666666; } + .word-suggestions StButton:checked { + color: white; + background-color: #737373; } /* Looking Glass */ #LookingGlassDialog { background-color: #303340; + border-radius: 0 0 16px 16px; + border-top-width: 0; + border: 1px solid rgba(255, 255, 255, 0.1); + color: white; + padding: 6px; spacing: 6px; - padding: 4px; - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 8px; - color: white; } + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } #LookingGlassDialog > #Toolbar { border: none; - border-radius: 8px; - background-color: #303340; } + padding: 6px; + border-radius: 0; + background-color: transparent; + spacing: 6px; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button { + padding: 6px 12px; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button > StIcon { + icon-size: 1.09em; } #LookingGlassDialog .labels { spacing: 6px; } #LookingGlassDialog .notebook-tab { -natural-hpadding: 12px; - -minimum-hpadding: 6px; + -minimum-hpadding: 12px; font-weight: bold; + padding: 6px 12px; color: #d9d9d9; transition-duration: 100ms; - padding-left: .3em; - padding-right: .3em; - border-bottom-width: 2px; } + box-shadow: none; + border: none; + border-radius: 6px; + background-color: transparent; } #LookingGlassDialog .notebook-tab:hover { - color: white; } + color: white; + background-color: rgba(255, 255, 255, 0.05); } #LookingGlassDialog .notebook-tab:selected { - border-bottom-width: 2px; - box-shadow: inset 0 -2px 0 0 #4187ff; - color: white; } + color: white; + background-color: rgba(255, 255, 255, 0.1); } #LookingGlassDialog StBoxLayout#EvalBox { padding: 4px; - spacing: 6px; } + spacing: 6px; + padding: 6px; } #LookingGlassDialog StBoxLayout#ResultsArea { - spacing: 6px; } + spacing: 6px; + padding: 6px; } .lg-dialog StEntry { background-color: rgba(59, 63, 78, 0.6); @@ -1895,14 +2204,13 @@ StScrollBar { color: #5a97ff; } .lg-dialog .actor-link { - color: #ccc; } + color: #888a8d; } .lg-dialog .actor-link:hover { - color: white; } + color: #bcbdbf; } .lg-dialog .actor-link:active { - color: #999999; } + color: #565759; } .lg-completions-text { - font-size: .9em; font-style: italic; } .lg-obj-inspector-title { @@ -1916,20 +2224,35 @@ StScrollBar { border: 1px solid #ffffff; } #lookingGlassExtensions { - padding: 4px; } + padding: 6px; } .lg-extensions-list { - padding: 4px; + padding: 6px; spacing: 6px; } .lg-extension { - border: 1px solid #0d0d0d; - background-color: #3b3f4e; + padding: 12px; border-radius: 8px; - padding: 4px; } - -.lg-extension-name { - font-weight: bold; } + margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + color: #eeeeec; + background-color: #2d2f38; } + .lg-extension:focus { + color: #eeeeec; + background-color: #2c364c; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .lg-extension:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .lg-extension:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .lg-extension:hover { + color: #eeeeec; + background-color: #343640; } + .lg-extension:active { + color: #eeeeec; + background-color: #3b3d49; } .lg-extension-meta { spacing: 6px; } @@ -1940,6 +2263,19 @@ StScrollBar { border-radius: 8px; padding: 6px; } +.lg-debug-flag-button { + color: #eeeeec; } + .lg-debug-flag-button StLabel { + padding: 6px, 12px; } + .lg-debug-flag-button:hover { + color: white; } + .lg-debug-flag-button:active { + color: #bebeb6; } + +.lg-debug-flags-header { + padding-top: 12px; + padding: 6px; } + /* Login Dialog */ .login-dialog-banner-view { padding-top: 24px; @@ -1949,10 +2285,6 @@ StScrollBar { .unlock-dialog { border: none; background-color: transparent; } - .login-dialog StEntry, - .unlock-dialog StEntry { - background-color: #20232b; - color: #eeeeec; } .login-dialog .modal-dialog-button-box, .unlock-dialog .modal-dialog-button-box { spacing: 3px; } @@ -1975,56 +2307,33 @@ StScrollBar { border-color: #1c1e25; } .login-dialog .modal-dialog-button:insensitive, .unlock-dialog .modal-dialog-button:insensitive { - color: #888a8d; - border-color: #0d0e11; - background-color: #242731; - box-shadow: none; - text-shadow: none; - icon-shadow: none; + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); border-color: #1c1e25; background-color: #1c1e25; color: rgba(255, 255, 255, 0.7); } .login-dialog .modal-dialog-button:default, .unlock-dialog .modal-dialog-button:default { - color: #ffffff; - background-color: #3681ff; - border-color: #136aff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - border-color: #2777ff; } + background-color: #2777ff; + color: #ffffff; } + .login-dialog .modal-dialog-button:default:focus, + .unlock-dialog .modal-dialog-button:default:focus { + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, .unlock-dialog .modal-dialog-button:default:hover, .unlock-dialog .modal-dialog-button:default:focus { - color: #ffffff; background-color: #4187ff; - border-color: #136aff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - background-color: #4187ff; - border-color: #4187ff; } + color: white; } .login-dialog .modal-dialog-button:default:active, .unlock-dialog .modal-dialog-button:default:active { - color: #ffffff; - background-color: #186eff; - border-color: #0058ee; - text-shadow: none; - icon-shadow: none; - box-shadow: none; - background-color: #0e67ff; - border-color: #0e67ff; } + background-color: #0361ff; + color: #ededed; } .login-dialog .modal-dialog-button:default:insensitive, .unlock-dialog .modal-dialog-button:default:insensitive { - color: #888a8d; - border-color: #0d0e11; - background-color: #242731; - box-shadow: none; - text-shadow: none; - icon-shadow: none; - border-color: #005af3; - background-color: #005af3; - color: rgba(255, 255, 255, 0.7); } + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: rgba(39, 119, 255, 0.5); + color: rgba(255, 255, 255, 0.5); } .login-dialog .cancel-button, .login-dialog .switch-user-button, .login-dialog .login-dialog-session-list-button, @@ -2072,11 +2381,39 @@ StScrollBar { color: white; } .login-dialog-not-listed-label { - font-size: 9pt; font-weight: bold; color: #b3b3b3; padding-top: 1em; } +.login-dialog-auth-list-view { + -st-vfade-offset: 1em; } + +.login-dialog-auth-list { + spacing: 6px; + margin-left: 2em; } + +.login-dialog-auth-list-title { + margin-left: 2em; } + +.login-dialog-auth-list-item { + border-radius: 12px; + padding: 6px; + color: #b3b3b3; } + .login-dialog-auth-list-item:focus, .login-dialog-auth-list-item:selected { + background-color: #2777ff; + color: #ffffff; } + +.login-dialog-auth-list-label { + font-size: 13pt; + font-weight: bold; + padding-left: 15px; } + .login-dialog-auth-list-label:ltr { + padding-left: 14px; + text-align: left; } + .login-dialog-auth-list-label:rtl { + padding-right: 14px; + text-align: right; } + .login-dialog-user-list-view { -st-vfade-offset: 1em; } @@ -2108,7 +2445,7 @@ StScrollBar { color: white; } .user-widget.horizontal .user-widget-label { - font-size: 12pt; + font-size: 13pt; font-weight: bold; padding-left: 15px; } .user-widget.horizontal .user-widget-label:ltr { @@ -2119,7 +2456,7 @@ StScrollBar { text-align: right; } .user-widget.vertical .user-widget-label { - font-size: 15pt; + font-size: 16pt; text-align: center; font-weight: normal; padding-top: 16px; } @@ -2139,9 +2476,27 @@ StScrollBar { .login-dialog-prompt-label { color: #cccccc; - font-size: 11pt; + font-size: 12pt; padding-top: 1em; } +.login-dialog StEntry { + background-color: #20232b; + color: #eeeeec; } + +.unlock-dialog StEntry { + border: none !important; } + .unlock-dialog StEntry:focus { + background-color: rgba(238, 238, 236, 0.1); } + .unlock-dialog StEntry:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); } + +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { + border-color: transparent; + background-color: rgba(238, 238, 236, 0.1); } + /* Screen Shield */ .unlock-dialog-clock { color: white; @@ -2152,8 +2507,7 @@ StScrollBar { .unlock-dialog-clock-time { font-size: 64pt; - padding-top: 42px; - font-feature-settings: "tnum"; } + padding-top: 42px; } .unlock-dialog-clock-date { font-size: 16pt; @@ -2164,7 +2518,7 @@ StScrollBar { padding-top: 48px; } .unlock-dialog-notifications-container { - margin: 12px 0; + margin: 12px; spacing: 6px; width: 23em; background-color: transparent; } @@ -2173,29 +2527,28 @@ StScrollBar { padding-bottom: 0; } .unlock-dialog-notifications-container .notification, .unlock-dialog-notifications-container .unlock-dialog-notification-source { - padding: 12px 6px; + padding: 12px 16px; border: none; - background-color: rgba(48, 51, 64, 0.3); + background-color: rgba(255, 255, 255, 0.1); color: white; border-radius: 16px; } .unlock-dialog-notifications-container .notification.critical, .unlock-dialog-notifications-container .unlock-dialog-notification-source.critical { - background-color: rgba(48, 51, 64, 0.9); } + background-color: rgba(255, 255, 255, 0.2); } .unlock-dialog-notification-label { - padding: 0px 0px 0px 12px; } + padding: 0 0 0 12px; } .unlock-dialog-notification-count-text { - weight: bold; - padding: 0 6px; - color: #303340; - background-color: rgba(255, 255, 255, 0.3); - border-radius: 99px; - margin-right: 12px; } + font-weight: bold; + padding: 0 12px; + color: white; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 99px; } .screen-shield-background { background: black; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6); } + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } #lockDialogGroup { background-color: #272a34; } @@ -2208,13 +2561,13 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.5); } /* OSD */ -.osd-window, .resize-popup, .switcher-list, .workspace-switcher-container { +.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel { font-weight: bold; background-color: #23252e; color: #eeeeec; border: 1px solid #0d0e11; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } - .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher-container StIcon { + .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher StIcon, .screenshot-ui-panel StIcon { color: #eeeeec; icon-shadow: 0 0 6px rgba(0, 0, 0, 0.4); } @@ -2280,7 +2633,7 @@ StScrollBar { background-color: white; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } -.window-close { +.window-close, .screenshot-ui-close-button { background-image: url("assets/close-window.svg"); background-size: 32px; background-color: transparent; @@ -2289,10 +2642,10 @@ StScrollBar { height: 32px; width: 32px; transition-duration: .2s; } - .window-close:hover { + .window-close:hover, .screenshot-ui-close-button:hover { background-image: url("assets/close-window-hover.svg"); background-color: transparent; } - .window-close:active { + .window-close:active, .screenshot-ui-close-button:active { background-image: url("assets/close-window-active.svg"); background-color: transparent; color: transparent; @@ -2351,32 +2704,30 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .datemenu-today-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .datemenu-today-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .datemenu-today-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .datemenu-today-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .datemenu-today-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #343640; box-shadow: none; } .datemenu-today-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .datemenu-today-button .date-label { font-size: 1.5em; font-weight: 300; } @@ -2386,32 +2737,30 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .calendar:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .calendar:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .calendar:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .calendar:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .calendar:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #343640; box-shadow: none; } .calendar:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .calendar .pager-button:hover, .calendar .pager-button:focus { background-color: #3b3e46; } .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus, .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { @@ -2433,32 +2782,30 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .events-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .events-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .events-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .events-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .events-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #343640; box-shadow: none; } .events-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } /* World clocks */ .world-clocks-button { @@ -2466,64 +2813,60 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .world-clocks-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .world-clocks-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .world-clocks-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .world-clocks-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .world-clocks-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #343640; box-shadow: none; } .world-clocks-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .weather-button { border-width: 1px; border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .weather-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .weather-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .weather-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .weather-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .weather-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #343640; box-shadow: none; } .weather-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } /* Search */ .search-entry { @@ -2584,10 +2927,10 @@ StScrollBar { color: black; } /* App Folders */ -.app-well-app.app-folder, .app-well-app.app-folder .overview-icon.overview-icon-with-label { +.app-well-app.app-folder, .app-folder.grid-search-result, .app-well-app.app-folder .overview-icon.overview-icon-with-label, .app-folder.grid-search-result .overview-icon.overview-icon-with-label { background-color: rgba(255, 255, 255, 0.1); } -.app-well-app.app-folder:checked { +.app-well-app.app-folder:checked, .app-folder.grid-search-result:checked { background: black; } .app-folder-dialog { diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 7ef44986..1aa55ab1 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -19,28 +19,23 @@ */ /* Global Values */ stage { - font-size: 10pt; + font-size: 11pt; color: #5c616c; } /* Common Stylings */ -.search-statustext { - font-size: 2em; - font-weight: bold; - color: white; } - -.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window { +.screenshot-ui-panel, .workspace-switcher, .switcher-list, .resize-popup, .osd-window { color: white; background-color: #303340; - border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 999px; padding: 12px; } .workspace-thumbnails .workspace-thumbnail { color: white; background-color: rgba(255, 255, 255, 0.1); } -.app-well-app .overview-icon, -.grid-search-result .overview-icon, .show-apps .overview-icon, .list-search-result, .search-provider-icon { - border-radius: 12px; +.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon, .dash-item-container .show-apps .overview-icon, .list-search-result, .search-provider-icon, .switcher-list .item-box { + border-radius: 16px; padding: 6px; border: 2px solid transparent; transition-duration: 100ms; @@ -49,92 +44,171 @@ stage { .modal-dialog { color: #5c616c; background-color: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.6); } + border-radius: 11px; + border: 1px solid rgba(255, 255, 255, 0.8); } -.app-folder-dialog .folder-name-container .edit-folder-button, .button { - border-radius: 8px; +#LookingGlassDialog > #Toolbar .lg-toolbar-button, .button { + border-radius: 6px; border-style: solid; border-width: 1px; - min-height: 22px; + font-weight: bold; padding: 3px 24px; color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { + background-color: #f7f7f8; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .button:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { - color: #aeb0b6; - border-color: #d9d9d9; - background-color: #fdfdfd; - box-shadow: none; - text-shadow: none; - icon-shadow: none; } - .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { + background-color: white; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .button:checked { + color: #5c616c; + background-color: white; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .button:checked:hover { + background-color: white; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .button:checked:active { + background-color: white; } .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: none; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); padding: 12px; - border-style: solid; - border-width: 1px; - border-left-width: 0; - border-bottom-width: 0; } + font-weight: bold !important; + margin-right: 1px; + color: #5c616c; + background-color: #dadadb; } .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { - color: #aeb0b6; - border-color: #d9d9d9; - background-color: #fdfdfd; - box-shadow: none; - text-shadow: none; - icon-shadow: none; } + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); } .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #c8d0df; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover { + background-color: #cfd7e5; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active { + background-color: #d6deec; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: none; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: #e2e2e3; } .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .modal-dialog .modal-dialog-linked-button:first-child, .hotplug-notification-item:first-child, .notification-banner .notification-button:first-child { - border-radius: 0 0 0 14px; } - .modal-dialog .modal-dialog-linked-button:last-child, .hotplug-notification-item:last-child, .notification-banner .notification-button:last-child { - border-right-width: 0; - border-radius: 0 0 14px 0; } + background-color: #eaeaea; } + .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked { + color: #5c616c; + background-color: #f1f1f2; } + .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover { + background-color: #f9f9f9; } + .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active { + background-color: white; } + .modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr { + border-radius: 0 0 0 10px; } + .modal-dialog .modal-dialog-linked-button:last-child:ltr, .hotplug-notification-item:last-child:ltr, .notification-banner .notification-button:last-child:ltr { + border-radius: 0 0 10px 0; + margin-right: 0 !important; } + .modal-dialog .modal-dialog-linked-button:first-child:rtl, .hotplug-notification-item:first-child:rtl, .notification-banner .notification-button:first-child:rtl { + border-radius: 0 0 10px 0; } + .modal-dialog .modal-dialog-linked-button:last-child:rtl, .hotplug-notification-item:last-child:rtl, .notification-banner .notification-button:last-child:rtl { + border-radius: 0 0 0 10px; + margin-right: 0 !important; } .modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child { - border-radius: 0 0 14px 14px; } + border-radius: 0 0 10px 10px !important; + margin-right: 0 !important; } + +.screenshot-ui-show-pointer-button, .screenshot-ui-type-button { + background-color: transparent; + background-color: none; } + .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } + .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { + background-color: transparent; + background-color: none; } + .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } + .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { + color: #5c616c; + background-color: #313d55; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover { + background-color: #37435d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active { + background-color: #3d4965; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover { + color: #5c616c; + background-color: #393d4b; } + .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { + color: #5c616c; + background-color: #3f4453; } + .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked { + color: #5c616c; + background-color: #464b5c; } + .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover { + background-color: #4c5265; } + .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:checked:active, .screenshot-ui-type-button:checked:active { + background-color: #535a6e; } + +/* General Typography */ +.search-statustext { + font-weight: 300; + font-size: 24pt; } + +.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry { + font-weight: 800; + font-size: 20pt; } + +.lg-debug-flags-header, .message-dialog-content .message-dialog-title, .message-list .message-list-placeholder, .datemenu-today-button .date-label { + font-weight: 800; + font-size: 15pt; } + +.nm-dialog-airplane-headline { + font-weight: 700; + font-size: 15pt; } + +.message-dialog-content .message-dialog-title.lightweight, .headline { + font-weight: 700; + font-size: 13pt; } + +.lg-extension-name, .osd-window, .nm-dialog-header, .dialog-list .dialog-list-title, .message-list-controls, .weather-button .weather-forecast-temp, .weather-button .weather-header, .world-clocks-button .world-clocks-time, .world-clocks-button .world-clocks-header, .events-button .events-title, .calendar .calendar-month-header .calendar-month-label, .datemenu-today-button .day-label, .popup-menu-ornament { + font-weight: 700; + font-size: 11pt; } + +.app-menu .popup-inactive-menu-item:first-child > StLabel { + font-weight: 700; + font-size: 9pt; } + +.login-dialog-not-listed-label, .lg-completions-text, .caps-lock-warning-label, #dash, .icon-label-button-container, .prompt-dialog-error-label, +.prompt-dialog-info-label, +.prompt-dialog-null-label, .run-dialog .run-dialog-description, .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description, .weather-button .weather-forecast-time, .world-clocks-button .world-clocks-timezone, .events-button .event-time { + font-weight: 400; + font-size: 9pt; } + +.calendar .calendar-day-base.calendar-day-heading, .calendar .calendar-day-base { + font-weight: 400; + font-size: 8pt; } + +.unlock-dialog-clock-time, #panel, .weather-button .weather-forecast-time, .world-clocks-button .world-clocks-timezone, .world-clocks-button .world-clocks-time, .events-button .event-time, .calendar .calendar-day-base { + font-feature-settings: "tnum"; } /* WIDGETS */ .shell-link { @@ -152,19 +226,24 @@ stage { StEntry { border-radius: 8px; padding: 8px; - border-width: 0; color: #5c616c; - background-color: #fafafa; - border-color: #d9d9d9; + background-color: white; + color: rgba(92, 97, 108, 0.7); + border: 2px solid white; selection-background-color: #2777ff; selected-color: #ffffff; } + StEntry:hover { + background-color: white; + border-color: white; + color: rgba(92, 97, 108, 0.7); } StEntry:focus { - border-color: #0051da; - box-shadow: inset 0 0 0 2px #2777ff; } + background-color: #f4f8ff; + border-color: #2777ff; + color: #5c616c; } StEntry:insensitive { - color: #aeb0b6; - border-color: #fdfdfd; - box-shadow: none; } + background-color: white; + border-color: white; + color: #aeb0b6; } StEntry StIcon.capslock-warning { icon-size: 16px; warning-color: #fd7d00; @@ -177,17 +256,20 @@ StEntry { color: rgba(92, 97, 108, 0.7); } /* Buttons */ +.button { + min-height: 22px; } + /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } .check-box StBin { width: 24px; - height: 22px; - background-image: url("assets/checkbox-off.svg"); } + height: 24px; + background-image: url("assets/checkbox-off-light.svg"); } .check-box:focus StBin { - background-image: url("assets/checkbox-off-focused.svg"); } + background-image: url("assets/checkbox-off-focused-light.svg"); } .check-box:checked StBin { background-image: url("assets/checkbox.svg"); } @@ -198,33 +280,27 @@ StEntry { /* Switches */ .toggle-switch { color: #5c616c; - height: 22px; - width: 46px; + height: 26px; + width: 48px; background-size: contain; - background-image: url("assets/toggle-off.svg"); } + background-image: url("assets/toggle-off-light.svg"); } .toggle-switch:checked { - background-image: url("assets/toggle-on.svg"); } + background-image: url("assets/toggle-on-light.svg"); } /* Slider */ .slider { - height: 15px; - -barlevel-height: 3px; - -barlevel-background-color: #d9d9d9; - -barlevel-border-width: 1px; - -barlevel-border-color: #d9d9d9; + -barlevel-height: 4px; + -barlevel-background-color: rgba(92, 97, 108, 0.4); + -barlevel-border-width: 2px; + -barlevel-border-color: transparent; -barlevel-active-background-color: #2777ff; - -barlevel-active-border-color: #136aff; + -barlevel-active-border-color: transparent; -barlevel-overdrive-color: #d41919; - -barlevel-overdrive-border-color: #c21717; + -barlevel-overdrive-border-color: transparent; -barlevel-overdrive-separator-width: 1px; - -slider-handle-radius: 7.5px; - -slider-handle-border-width: 1px; - -slider-handle-border-color: #d9d9d9; - color: white; } - .slider:hover { - color: #f7f7f7; } - .slider:active { - color: #ededed; } + -slider-handle-radius: 8px; + -slider-handle-border-width: 0; + -slider-handle-border-color: transparent; } /* Scrollbars */ StScrollView.vfade { @@ -236,530 +312,490 @@ StScrollView.hfade { StScrollBar { padding: 0; } StScrollView StScrollBar { - min-width: 14px; - min-height: 14px; } + min-width: 8px; + min-height: 8px; } StScrollBar StBin#trough { border-radius: 0; background-color: transparent; } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { border-radius: 8px; - background-color: #9da0a7; - margin: 3px; } + background-color: #ced0d3; + border: 3px solid transparent; + transition: 500ms all ease; } StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { - background-color: #7d8189; } + background-color: #aeb0b6; } StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { - background-color: #2777ff; } + background-color: #bec0c4; } /* Popovers/Menus */ .popup-menu-boxpointer, .candidate-popup-boxpointer { - -arrow-border-radius: 12px; - -arrow-background-color: #ffffff; - -arrow-border-width: 1px; - -arrow-border-color: #d9d9d9; - -arrow-base: 24px; - -arrow-rise: 12px; - -arrow-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } + margin: 4px; } .popup-menu { min-width: 15em; color: #5c616c; } .popup-menu.panel-menu { - -boxpointer-gap: 4px; + -boxpointer-gap: 6px; margin-bottom: 1.75em; } -.popup-menu-content { - padding: 16px 0; } +.popup-menu-content, .candidate-popup-content { + padding: 6px; + border-radius: 14px; + border: 1px solid rgba(255, 255, 255, 0.8); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); + background-color: #ffffff; } .popup-menu-item { - spacing: 6px; - padding: 6px; } - .popup-menu-item:ltr { - padding-right: 1.75em; - padding-left: 0; } - .popup-menu-item:rtl { - padding-right: 0; - padding-left: 1.75em; } + padding: 9px 12px; + border-radius: 8px; + transition: 0.2s all ease; + background-color: transparent; } + .popup-menu-item:focus, .popup-menu-item:hover { + background-color: #f7f7f7 !important; } + .popup-menu-item:focus:active, .popup-menu-item:hover:active { + background-color: #f2f2f2 !important; } .popup-menu-item:checked { - background-color: white; - box-shadow: none; } - .popup-menu-item.selected { - background-color: rgba(255, 255, 255, 0.8); - color: #5c616c; } + background-color: #ededed !important; } + .popup-menu-item:checked { + margin-bottom: 0; + box-shadow: inset 0 -1px 0 0 #e0e0e0; + border-radius: 8px 8px 0 0; } + .popup-menu-item:checked:focus, .popup-menu-item:checked:hover { + background-color: whitesmoke !important; } + .popup-menu-item:checked:active { + background-color: #fafafa !important; } .popup-menu-item:active { - background-color: #2777ff; - color: #ffffff; } + background-color: white; + color: #50555e; } .popup-menu-item:insensitive { color: rgba(92, 97, 108, 0.5); } .popup-inactive-menu-item { color: #5c616c; } .popup-inactive-menu-item:insensitive { - color: rgba(92, 97, 108, 0.5); } + color: #aeb0b6; } .popup-menu-arrow, .popup-menu-icon { - icon-size: 1.09em; } + icon-size: 16px !important; } + +.popup-menu-arrow:ltr { + margin-right: 4px; } + +.popup-menu-arrow:rtl { + margin-left: 4px; } .popup-sub-menu { - background-color: #f7f7f7; - box-shadow: none; - border-top: 1px solid rgba(217, 217, 217, 0.8); - border-bottom: 1px solid rgba(217, 217, 217, 0.8); } + background-color: #ededed; + border-radius: 0 0 8px 8px; } + .popup-sub-menu .popup-menu-ornament { + min-width: 1.09em !important; } + .popup-sub-menu .popup-menu-item { + border-radius: 0; + margin: 0; } + .popup-sub-menu .popup-menu-item:last-child { + border-radius: 0 0 8px 8px; } + .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { + background-color: white !important; } + .popup-sub-menu .popup-menu-item:checked { + background-color: white !important; } + .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { + background-color: white !important; } + .popup-sub-menu .popup-menu-item:active { + background-color: white !important; } + .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus { + border-radius: 0; } + .popup-sub-menu .popup-menu-section:last-child .popup-menu-item:last-child { + border-radius: 0 0 8px 8px; } .popup-menu-ornament { - width: 1.2em; } + width: 1.2em; + text-align: center !important; } .popup-menu-ornament:ltr { text-align: right; } .popup-menu-ornament:rtl { text-align: left; } .popup-separator-menu-item { - padding: 0; } + padding: 0; + margin: 6px 0; } .popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; - margin: 6px 64px; - background-color: #dedede; } + background-color: #d9d9d9; } + .popup-separator-menu-item .popup-menu-ornament { + width: 0 !important; } + .popup-sub-menu .popup-separator-menu-item { + padding: 0; + margin-right: 2.5em !important; + background-color: transparent; } .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { - margin: 0 64px 0 32px; } + background-color: #ebebeb; } .background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; } .aggregate-menu { - min-width: 21em; } + min-width: 22em; } + .aggregate-menu .popup-menu-ornament { + width: 0 !important; } .aggregate-menu .popup-menu-icon { - padding: 0; - margin: 0 4px; -st-icon-style: symbolic; } + .aggregate-menu .popup-menu-icon:ltr { + margin-right: 8px; } + .aggregate-menu .popup-menu-icon:rtl { + margin-left: 8px; } .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr { - padding-left: 14px; - margin-left: 1.09em; } + margin-left: 8px; } .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { - padding-right: 14px; - margin-right: 1.09em; } + margin-right: 8px; } + +.app-menu { + max-width: 27.25em; } + .app-menu .popup-menu-content, .app-menu .candidate-popup-content { + margin: 4px; } + .app-menu.panel-menu .popup-menu-content, .app-menu.panel-menu .candidate-popup-content { + margin: 0; } + .app-menu .popup-menu-ornament { + width: 0 !important; } + .app-menu .popup-inactive-menu-item:first-child > StLabel:ltr { + margin-right: 8px; } + .app-menu .popup-inactive-menu-item:first-child > StLabel:rtl { + margin-left: 8px; } /* Date/Time Menu */ -.clock-display-box { - spacing: 2px; } - .clock-display-box .clock { - padding-left: 12px; - padding-right: 12px; } - #calendarArea { - padding: 0; } + padding: 4px; } .datemenu-calendar-column { - spacing: 6px; - border: 0 solid #d9d9d9; - padding: 0 12px; } + spacing: 6px; } .datemenu-calendar-column:ltr { - margin-right: 8px; - border-left-width: 1px; } + padding-left: 6px; } .datemenu-calendar-column:rtl { - margin-left: 8px; - border-right-width: 1px; } + padding-right: 6px; } .datemenu-calendar-column .datemenu-displays-box { spacing: 6px; } -.events-section-title { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - border-color: transparent; - background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; - color: black; - font-weight: bold; - padding: .4em; } - .events-section-title:focus { - color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .events-section-title:hover { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .events-section-title:active { - color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - /* today button (the date) */ .datemenu-today-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - border-color: transparent; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; + background-color: none; + box-shadow: none !important; padding: 9px; } + .datemenu-today-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .datemenu-today-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .datemenu-today-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .datemenu-today-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .datemenu-today-button:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: white; } .datemenu-today-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .datemenu-today-button .day-label { - font-size: 11pt; - font-weight: bold; } - .datemenu-today-button .date-label { - font-size: 17pt; - font-weight: 1000; } + background-color: white; } /* Calendar */ .calendar { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - color: #5c616c; - background-color: white; - border-color: #d1d1d1; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - padding: 6px; } + background-color: transparent; + background-color: none; + box-shadow: none !important; + margin-top: 0; } + .calendar:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .calendar:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .calendar:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .calendar:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .calendar:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: white; } .calendar:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .calendar .calendar-month-label { - color: #686d7a; - font-weight: bold; - padding: 8px 0; } - .calendar .calendar-change-month-back StIcon, - .calendar .calendar-change-month-forward StIcon { + background-color: white; } + .calendar .calendar-month-header .calendar-change-month-back StIcon, + .calendar .calendar-month-header .calendar-change-month-forward StIcon { icon-size: 1.09em; } - .calendar .pager-button { + .calendar .calendar-month-header .calendar-month-label { + color: #686d7a; + padding: 8px 0; } + .calendar .calendar-month-header .pager-button { background-color: transparent; height: 32px; width: 32px; - border-radius: 8px; } - .calendar .pager-button:hover, .calendar .pager-button:focus { - background-color: white; } - .calendar .pager-button:active { - background-color: #ededed; } - .calendar .calendar-day-base { - font-size: 7pt; - text-align: center; - width: 32px; - height: 32px; - padding: 0; margin: 2px; - border-radius: 18px; - border: 1px solid transparent; - font-feature-settings: "tnum"; } - .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus { + border-radius: 6px; } + .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { background-color: #f7f7f7; } - .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { - color: #737a88; + .calendar .calendar-month-header .pager-button:active { background-color: #f2f2f2; } + .calendar .calendar-day-base { + text-align: center; + margin: 2px; + padding: 0 !important; + height: 32px !important; + width: 32px !important; + border-radius: 99px; } + .calendar .calendar-day-base:hover { + background-color: #f7f7f7; } + .calendar .calendar-day-base:focus { + background-color: #d4e4ff; + color: #ffffff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { + color: #50555e; + background-color: #f2f2f2; } + .calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus { + background-color: #cadaf5; } .calendar .calendar-day-base.calendar-day-heading { - color: #737a88; - margin-top: 1em; - font-size: 6pt; } - .calendar .calendar-day { - border-width: 0; } - .calendar .calendar-day-top { - border-top-width: 1px; } - .calendar .calendar-day-left { - border-left-width: 1px; } + color: #aeb0b6; + padding-top: 6px; + height: 16px !important; + font-weight: bold; } .calendar .calendar-nonwork-day { color: #aeb0b6; } - .calendar .calendar-today { - font-weight: bold; - border: 1px solid transparent; - background-color: #2777ff; - color: #ffffff; } - .calendar .calendar-today:hover, .calendar .calendar-today:focus { - background-color: #3681ff; - color: #ffffff; } - .calendar .calendar-today:active, .calendar .calendar-today:selected { - background-color: #2777ff; - color: #ffffff; } - .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { - background-color: #3681ff; - color: #ffffff; } - .calendar .calendar-day-with-events { - background-image: url("assets/calendar-today.svg"); } - .calendar .calendar-day-with-events.calendar-work-day { - color: #737a88; - font-weight: bold; } .calendar .calendar-other-month-day { color: rgba(92, 97, 108, 0.5); } + .calendar .calendar-other-month-day.calendar-nonwork-day { + color: rgba(174, 176, 182, 0.5); } + .calendar .calendar-today { + background-color: #2777ff; + font-weight: 800; + color: #ffffff !important; } + .calendar .calendar-today:hover, .calendar .calendar-today:focus { + background-color: #3681ff; + color: inherit; } + .calendar .calendar-today:active, .calendar .calendar-today:selected { + background-color: #2777ff; + color: inherit; } + .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { + background-color: #3681ff; + color: inherit; } + .calendar .calendar-day-with-events { + background-image: url("assets/calendar-today-light.svg"); + background-size: contain; } .calendar .calendar-week-number { - font-size: 6pt; + font-size: 7pt; font-weight: bold; - height: 1.8em; - width: 2.3em; - border-radius: 2px; + font-feature-settings: "tnum"; margin: 6px; + padding: 0 6px; + border-radius: 3px; background-color: #fafafa; - color: #686d7a; } + color: #aeb0b6; } /* Events */ .events-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - color: #5c616c; - background-color: white; - border-color: #d1d1d1; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + color: #5c616c; + background-color: #f7f7f8; padding: 12px; } .events-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .events-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .events-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .events-button:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: white; } .events-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .events-button .events-box { spacing: 6px; } .events-button .events-list { spacing: 12px; } .events-button .events-title { - color: black; - font-weight: bold; + color: #aeb0b6; margin-bottom: 4px; } .events-button .event-time { - color: #2d3035; - font-feature-settings: "tnum"; - font-size: 9pt; } + color: #aeb0b6; } /* World clocks */ .world-clocks-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - color: #5c616c; - background-color: white; - border-color: #d1d1d1; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + color: #5c616c; + background-color: #f7f7f8; padding: 12px; } .world-clocks-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .world-clocks-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .world-clocks-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .world-clocks-button:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: white; } .world-clocks-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .world-clocks-button .world-clocks-grid { spacing-rows: 6px; spacing-columns: 12px; } .world-clocks-button .world-clocks-header { - color: black; - font-weight: bold; } + color: #aeb0b6; } .world-clocks-button .world-clocks-city { - color: #5c616c; - font-size: 10pt; - font-weight: normal; } + color: #5c616c; } .world-clocks-button .world-clocks-time { - font-weight: bold; - color: #5c616c; - font-feature-settings: "tnum"; - font-size: 10pt; } + color: #5c616c; } .world-clocks-button .world-clocks-time:ltr { text-align: right; } .world-clocks-button .world-clocks-time:rtl { text-align: left; } .world-clocks-button .world-clocks-timezone { - color: #2d3035; - font-feature-settings: "tnum"; - font-size: 9pt; } + color: #aeb0b6; } /* Weather */ .weather-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - color: #5c616c; - background-color: white; - border-color: #d1d1d1; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + color: #5c616c; + background-color: #f7f7f8; padding: 12px; } .weather-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .weather-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .weather-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .weather-button:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: white; } .weather-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .weather-button .weather-box { spacing: 10px; } .weather-button .weather-header-box { spacing: 6px; } .weather-button .weather-header { - color: black; - font-weight: bold; } + color: #aeb0b6; } .weather-button .weather-header.location { - font-weight: normal; - font-size: 9pt; } + font-weight: normal; } .weather-button .weather-grid { spacing-rows: 6px; spacing-columns: 12px; } .weather-button .weather-forecast-time { color: #161719; - font-feature-settings: "tnum"; - font-size: 8pt; - font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } .weather-button .weather-forecast-icon { icon-size: 2.18em; } - .weather-button .weather-forecast-temp { - font-weight: bold; } /* Message List */ .message-list { - width: 31.5em; - padding: 0 12px; } + width: 32em; + border: solid #d9d9d9; } + .message-list:ltr { + margin-left: 0; + margin-right: 4px; + padding-right: 6px; + border-right-width: 1px; } + .message-list:rtl { + margin-right: 0; + margin-left: 4px; + padding-left: 6px; + border-left-width: 1px; } .message-list .message-list-placeholder { - spacing: 12px; } + color: rgba(174, 176, 182, 0.5); } + .message-list .message-list-placeholder > StIcon { + icon-size: 3.27em; + margin-bottom: 12px; + -st-icon-style: symbolic; } .message-list-sections { spacing: 6px; - margin: 0 16px; } + margin: 0; + padding-bottom: 6px; } + .message-list-sections:ltr { + margin-right: 12px; } + .message-list-sections:rtl { + margin-left: 12px; } .message-list-section, .message-list-section-list { spacing: 6px; } .message-list-controls { - margin: 8px 16px 0; - padding: 4px; - spacing: 12px; } + padding: 6px; + spacing: 6px; } .message-list-controls .dnd-button { border-width: 2px; border-color: transparent; - border-radius: 99px; + border-radius: 32px; border-style: solid; } .message-list-controls .dnd-button:focus { border-color: rgba(39, 119, 255, 0.6); } .message { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - color: #5c616c; - background-color: white; - border-color: #d1d1d1; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + color: #5c616c; + background-color: #f7f7f8; } .message:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .message:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .message:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .message:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: white; } .message:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .message .message-icon-bin { - padding: 18px 0 18px 12px; } + padding: 18px; + padding-right: 6px; } .message .message-icon-bin:rtl { - padding: 18px 12px 18px 0; } + padding-right: 6px; } .message .message-icon-bin > StIcon { icon-size: 2.18em; -st-icon-style: symbolic; } @@ -767,15 +803,18 @@ StScrollBar { width: 1.09em; height: 1.09em; } .message .message-content { - padding: 14px; - spacing: 4px; } + spacing: 4px; + padding: 9px; + margin-bottom: 8px; } .message .message-title { - font-weight: bold; } + font-weight: bold; + /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ + padding-top: 0.57em; } .message .message-secondary-bin { padding: 0 8px; } .message .message-secondary-bin > .event-time { color: rgba(92, 97, 108, 0.5); - font-size: 8pt; + font-size: 9pt; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } .message .message-secondary-bin > .event-time:ltr { @@ -783,11 +822,15 @@ StScrollBar { .message .message-secondary-bin > .event-time:rtl { text-align: left; } .message .message-close-button { - color: #818794; } + color: #5c616c; + background-color: rgba(92, 97, 108, 0.1); + border-radius: 99px; + padding: 5px; + margin: 1px; } .message .message-close-button:hover { - color: #aaaeb7; } + background-color: rgba(92, 97, 108, 0.2); } .message .message-close-button:active { - color: #c6c8ce; } + background-color: rgba(92, 97, 108, 0.1); } .message .message-body { color: #454850; } @@ -796,75 +839,87 @@ StScrollBar { /* Media Controls */ .message-media-control { - padding: 12px 1.64em; - color: #393c43; } + padding: 0 18px; + margin: 12px 0; + border-radius: 8px; + color: #5c616c; } .message-media-control:hover { background-color: white; color: #5c616c; } .message-media-control:active { - background-color: #f2f2f2; + background-color: white; color: #5c616c; } .message-media-control:insensitive { - color: black; } + color: #bbbdc2; } .message-media-control:last-child:ltr { - border-radius: 0 10px 10px 0; } + margin-right: 12px; } .message-media-control:last-child:rtl { - border-radius: 10px 0 0 10px; } + margin-left: 12px; } .media-message-cover-icon { - icon-size: 2.18em !important; + icon-size: 3.27em !important; border-radius: 8px; } .media-message-cover-icon.fallback { color: #34373d; background-color: #ffffff; border: 1px solid transparent; border-radius: 8px; - icon-size: 2.18em !important; } + icon-size: 2.18em !important; + padding: 14px; } .candidate-popup-content { - padding: 0.5em; - spacing: 0.3em; } + padding: 6px; + spacing: 6px; } .candidate-index { - padding: 0 0.5em 0 0; - color: #454850; } + padding: 0; + padding-right: 6px; + color: #aeb0b6; } .candidate-box { - padding: 0.3em 0.5em 0.3em 0.5em; + padding: 6px 12px 6px 12px; border-radius: 8px; } - .candidate-box:selected, .candidate-box:hover { + .candidate-box:selected { background-color: #2777ff; color: #ffffff; } + .candidate-box:hover { + background-color: #f7f7f7; + color: #50555e; } .candidate-page-button-box { height: 2em; } .vertical .candidate-page-button-box { - padding-top: 0.5em; } + padding-top: 12px; } .horizontal .candidate-page-button-box { - padding-left: 0.5em; } + padding-left: 12px; } .candidate-page-button { - padding: 4px; } + padding: 6px; } .candidate-page-button-previous { border-radius: 8px 0px 0px 8px; - border-right-width: 0; } + border-right-width: 0; + box-shadow: none; } .candidate-page-button-next { - border-radius: 0px 8px 8px 0px; } + border-radius: 0px 8px 8px 0px; + box-shadow: none; } .candidate-page-button-icon { - icon-size: 1em; } + icon-size: 1.09em; } /* Notifications & Message Tray */ .notification-banner { min-height: 64px; - width: 34em; } + width: 34em; + box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.1); + border-radius: 12px; + margin: 4px; } .notification-banner .notification-actions { spacing: 0; } .summary-source-counter { - font-size: 9pt; + font-size: 10pt; font-weight: bold; height: 1.6em; width: 1.6em; @@ -903,7 +958,7 @@ StScrollBar { .chat-meta-message { padding-left: 4px; - font-size: 8pt; + font-size: 9pt; font-weight: bold; color: #898f9b; } .chat-meta-message:rtl { @@ -915,15 +970,10 @@ StScrollBar { padding: 0 4px; } /* Modal Dialogs */ -.headline { - font-size: 11pt; } - -.modal-dialog { - border-radius: 16px; } - .modal-dialog .modal-dialog-content-box { - margin: 32px 40px; - spacing: 32px; - max-width: 28em; } +.modal-dialog .modal-dialog-content-box { + margin: 32px 40px; + spacing: 32px; + max-width: 28em; } /* End Session Dialog */ .end-session-dialog { @@ -936,12 +986,7 @@ StScrollBar { .message-dialog-content { spacing: 18px; } .message-dialog-content .message-dialog-title { - text-align: center; - font-size: 18pt; - font-weight: 800; } - .message-dialog-content .message-dialog-title.lightweight { - font-size: 13pt; - font-weight: 800; } + text-align: center; } .message-dialog-content .message-dialog-description { text-align: center; } @@ -949,8 +994,7 @@ StScrollBar { .dialog-list { spacing: 18px; } .dialog-list .dialog-list-title { - text-align: center; - font-weight: bold; } + text-align: center; } .dialog-list .dialog-list-scrollview { max-height: 200px; } .dialog-list .dialog-list-box { @@ -960,8 +1004,7 @@ StScrollBar { .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { font-weight: bold; } .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { - color: #50555e; - font-size: 9pt; } + color: #50555e; } /* Run Dialog */ .run-dialog .modal-dialog-content-box { @@ -972,7 +1015,6 @@ StScrollBar { width: 20em; } .run-dialog .run-dialog-description { - font-size: 9pt; text-align: center; color: #2d3035; } @@ -1001,8 +1043,7 @@ StScrollBar { .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { - text-align: center; - font-size: 9pt; } + text-align: center; } .prompt-dialog-error-label { color: #fd7d00; } @@ -1023,8 +1064,7 @@ StScrollBar { spacing: 20px; } .audio-selection-device { - border: 1px solid #d9d9d9; - border-radius: 12px; } + border-radius: 16px; } .audio-selection-device:hover, .audio-selection-device:focus { background-color: #f7f7f7; } .audio-selection-device:active { @@ -1046,7 +1086,7 @@ StScrollBar { height: 300px; width: 300px; } -/* Network Dialogs */ +/* Select Network dialogs */ .nm-dialog { max-height: 34em; min-height: 31em; @@ -1056,18 +1096,8 @@ StScrollBar { spacing: 20px; padding: 24px; } -.nm-dialog-airplane-box { - spacing: 12px; } - -.nm-dialog-airplane-headline { - font-weight: bold; - text-align: center; } - -.nm-dialog-airplane-text { - color: #5c616c; } - -.nm-dialog-header { - font-weight: bold; } +.nm-dialog-subheader { + color: #aeb0b6; } .nm-dialog-header-icon { icon-size: 2.18em; } @@ -1076,18 +1106,18 @@ StScrollBar { spacing: 10px; } .nm-dialog-scroll-view { - border: 1px solid #d9d9d9; - padding: 0; - background-color: #f7f7f7; } + padding: 6px; + border-radius: 8px; + background-color: #fafafa; } .nm-dialog-item { - font-size: 10pt; - border-bottom: 1px solid #d9d9d9; - padding: 12px; - spacing: 0px; } + padding: 12px; } .nm-dialog-item:selected { background-color: #2777ff; + border-radius: 5px; color: #ffffff; } + .nm-dialog-item:hover { + background-color: #f7f7f7; } .nm-dialog-icon { icon-size: 1.09em; } @@ -1095,31 +1125,51 @@ StScrollBar { .nm-dialog-icons { spacing: 12px; } +.no-networks-box { + spacing: 6px; } + .no-networks-label { color: #aeb0b6; } -.no-networks-box { - spacing: 6px; } +.nm-dialog-airplane-box { + text-align: center; + spacing: 12px; } + +.nm-dialog-airplane-text { + color: #aeb0b6; } /* OSD */ .osd-window { text-align: center; font-weight: bold; spacing: 12px; - margin: 32px; - min-width: 64px; - min-height: 64px; } + padding: 12px 18px; + margin-bottom: 4em; } + .osd-window > * { + spacing: 8px; } .osd-window StIcon { - icon-size: 6.54em; } + icon-size: 2.18em; } .osd-window .osd-monitor-label { font-size: 3em; } + .osd-window StLabel:ltr { + margin-right: 6px; } + .osd-window StLabel:rtl { + margin-left: 6px; } .osd-window .level { - height: 8px; - -barlevel-height: 8px; + margin-bottom: 4px; + height: 6px; + min-width: 10.9em; + -barlevel-height: 6px; -barlevel-background-color: rgba(255, 255, 255, 0.3); -barlevel-active-background-color: white; -barlevel-overdrive-color: #d41919; -barlevel-overdrive-separator-width: 3px; } + .osd-window .level:first-child { + margin-bottom: 0px; } + .osd-window .level:ltr { + margin-right: 6px; } + .osd-window .level:rtl { + margin-left: 6px; } /* Pad OSD */ .pad-osd-window { @@ -1135,38 +1185,52 @@ StScrollBar { /* App Switcher */ .switcher-popup { - padding: 8px; + padding: 0; spacing: 24px; } -.switcher-list .item-box { - padding: 8px; - border-radius: 9px; - border: 1px solid transparent; } - .switcher-list .item-box:outlined { - background-color: rgba(255, 255, 255, 0.3); } - .switcher-list .item-box:selected { - background-color: rgba(255, 255, 255, 0.3); - color: white; } - -.switcher-list .thumbnail-box { - padding: 2px; - spacing: 6px; } - -.switcher-list .thumbnail { - width: 256px; } - -.switcher-list .separator { - width: 1px; - background: #d9d9d9; } - -.switcher-list .switcher-list-item-container { - spacing: 12px; } +.switcher-list { + padding: 10px; + border-radius: 24px; + box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1); } + .switcher-list .switcher-list-item-container { + spacing: 12px; } + .switcher-list .item-box { + background-color: transparent; } + .switcher-list .item-box:hover { + background-color: rgba(255, 255, 255, 0.1); } + .switcher-list .item-box:selected, .switcher-list .item-box:focus { + background-color: rgba(255, 255, 255, 0.13); } + .switcher-list .item-box:selected:hover, .switcher-list .item-box:focus:hover { + background-color: rgba(255, 255, 255, 0.16); } + .switcher-list .item-box:selected:active, .switcher-list .item-box:focus:active { + background-color: rgba(255, 255, 255, 0.13); } + .switcher-list .item-box:active { + background-color: rgba(255, 255, 255, 0.16); } + .switcher-list .item-box:outlined, .switcher-list .item-box:checked { + background-color: rgba(255, 255, 255, 0.19); } + .switcher-list .item-box:outlined:active, .switcher-list .item-box:checked:active { + background-color: rgba(255, 255, 255, 0.22); } + .switcher-list .item-box:outlined:hover, .switcher-list .item-box:checked:hover { + background-color: rgba(255, 255, 255, 0.25); } + .switcher-list .item-box:drop { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } + .switcher-list .separator { + width: 1px; + background: #d9d9d9; } + .switcher-list .thumbnail-box { + padding: 2px; + spacing: 6px; } + .switcher-list .thumbnail { + width: 256px; + border-radius: 8px; } .switcher-arrow { - border-color: rgba(0, 0, 0, 0); - color: rgba(92, 97, 108, 0.8); } + border-color: rgba(255, 255, 255, 0.8); + color: rgba(255, 255, 255, 0.8); } .switcher-arrow:highlighted { - color: #5c616c; } + border-color: white; + color: white; } .input-source-switcher-symbol { font-size: 34pt; @@ -1177,54 +1241,173 @@ StScrollBar { border: 5px solid #2777ff; } /* Workspace Switcher */ -.workspace-switcher-group { - padding: 12px; } - .workspace-switcher { - background: transparent; - border: none; - border-radius: 0; - padding: 0; + margin-bottom: 4em; + spacing: 12px; + padding: 12px 18px; } + +.ws-switcher-indicator { + background-color: rgba(255, 255, 255, 0.5); + padding: 0.1816666667em; + margin: 0.9083333333em; + border-radius: 2.18em; } + .ws-switcher-indicator:active { + background-color: white; + padding: 0.3633333333em; + margin: 0.7266666667em; } + +.icon-label-button-container { + spacing: 6px; } + .icon-label-button-container StIcon { + icon-size: 32px; } + +.screenshot-ui-panel { + border-radius: 37px; + padding: 18px; + padding-bottom: 12px; + margin-bottom: 4em; spacing: 12px; } -.ws-switcher-box { - background: transparent; - height: 50px; - background-size: 32px; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 11px; } +.screenshot-ui-close-button { + padding: 6px; } + .screenshot-ui-close-button.left { + margin-left: 8px; } + .screenshot-ui-close-button.right { + margin-right: 8px; } -.ws-switcher-active-up, -.ws-switcher-active-down, -.ws-switcher-active-left, -.ws-switcher-active-right { - height: 52px; - background-color: #2777ff; - border: 1px solid #005efd; - border-radius: 11px; - color: #ffffff; } +.screenshot-ui-type-button { + padding: 12px 18px !important; + border-radius: 19px; } + +.screenshot-ui-capture-button { + width: 36px; + height: 36px; + border-radius: 99px; + border: 4px white; + padding: 4px; } + .screenshot-ui-capture-button .screenshot-ui-capture-button-circle { + background-color: white; + transition-duration: 200ms; + border-radius: 99px; } + .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus { + background-color: #f7f7f7; } + .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { + background-color: #d9d9d9; } + .screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle { + background-color: gray; } + .screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle { + background-color: #bf1717; } + .screenshot-ui-capture-button:cast:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:cast:focus .screenshot-ui-capture-button-circle { + background-color: #7b0f0f; } + .screenshot-ui-capture-button:cast:active .screenshot-ui-capture-button-circle { + background-color: #360707; } + +.screenshot-ui-shot-cast-container { + background-color: #f7f7f7; + border-radius: 16px; + padding: 3px; + spacing: 3px; } + .screenshot-ui-shot-cast-container:ltr { + margin-left: 3px; } + .screenshot-ui-shot-cast-container:rtl { + margin-right: 3px; } + +.screenshot-ui-shot-cast-button { + padding: 6px 12px; + background-color: transparent; + border-radius: 13px; } + .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { + background-color: white; } + .screenshot-ui-shot-cast-button:active { + background-color: white; } + .screenshot-ui-shot-cast-button:checked { + background-color: white; + color: black; } + .screenshot-ui-shot-cast-button StIcon { + icon-size: 1.09em; } + +.screenshot-ui-show-pointer-button { + border-radius: 99px; + padding: 12px !important; } + .screenshot-ui-show-pointer-button StIcon { + icon-size: 1.09em; } + +.screenshot-ui-area-indicator-shade { + background-color: rgba(0, 0, 0, 0.3); } + +.screenshot-ui-area-selector .screenshot-ui-area-indicator-shade { + background-color: rgba(0, 0, 0, 0.5); } + +.screenshot-ui-area-selector .screenshot-ui-area-indicator-selection { + border: 2px white; } + +.screenshot-ui-area-selector-handle { + border-radius: 99px; + background-color: white; + box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.2); + width: 24px; + height: 24px; } + +.screenshot-ui-window-selector { + background-color: #272a34; } + .screenshot-ui-window-selector .screenshot-ui-window-selector-window-container { + margin: 100px; } + .screenshot-ui-window-selector:primary-monitor .screenshot-ui-window-selector-window-container { + margin-bottom: 200px; } + +.screenshot-ui-window-selector-window-border { + transition-duration: 200ms; + border-radius: 16px; + border: 6px transparent; } + +.screenshot-ui-window-selector-check { + transition-duration: 200ms; + color: transparent; + border-radius: 99px; + border-width: 12px; + icon-size: 24px; } + +.screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border { + border-color: #0051da; } + +.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border { + border-color: #2777ff; + background-color: rgba(39, 119, 255, 0.2); } + +.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check { + color: white; + background-color: #2777ff; } + +.screenshot-ui-screen-selector { + transition-duration: 200ms; + background-color: rgba(0, 0, 0, 0.5); } + .screenshot-ui-screen-selector:hover { + background-color: rgba(0, 0, 0, 0.3); } + .screenshot-ui-screen-selector:active { + background-color: rgba(0, 0, 0, 0.7); } + .screenshot-ui-screen-selector:checked { + background-color: transparent; + border: 2px white; } + +.screenshot-ui-tooltip { + color: white; + background-color: #303340; + border-radius: 99px; + padding: 6px 12px; + text-align: center; + -y-offset: 24px; } /* Top Bar */ #panel { background-color: #000; font-weight: bold; height: 2.2em; - font-feature-settings: "tnum"; transition-duration: 250ms; } #panel.unlock-screen, #panel.login-screen, #panel:overview { background-color: transparent; } - #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel:overview .panel-corner { - -panel-corner-opacity: 0; } - #panel .panel-corner { - -panel-corner-radius: 9px; - -panel-corner-background-color: #000; - -panel-corner-border-width: 2px; - -panel-corner-border-color: transparent; - -panel-corner-opacity: 1; - transition-duration: 250ms; } #panel .panel-button { font-weight: bold; - color: #ddd; + color: white; -natural-hpadding: 12px; -minimum-hpadding: 6px; transition-duration: 150ms; @@ -1234,12 +1417,36 @@ StScrollBar { transition-duration: 150ms; border: 3px solid transparent; border-radius: 99px; } - #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { + #panel .panel-button.screen-recording-indicator { + box-shadow: inset 0 0 0 100px #bf1717; } + #panel .panel-button.screen-recording-indicator StBoxLayout { + spacing: 6px; } + #panel .panel-button.screen-recording-indicator StIcon { + icon-size: 1.09em; } + #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } - #panel .panel-button:hover.clock-display, #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display { + #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display { box-shadow: none; } - #panel .panel-button:hover.clock-display .clock, #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock { + #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel .panel-button:active.screen-recording-indicator, #panel .panel-button:overview.screen-recording-indicator, #panel .panel-button:focus.screen-recording-indicator, #panel .panel-button:checked.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.85); } + #panel .panel-button:hover { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } + #panel .panel-button:hover.clock-display { + box-shadow: none; } + #panel .panel-button:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } + #panel .panel-button:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.9); } + #panel .panel-button:active:hover, #panel .panel-button:overview:hover, #panel .panel-button:focus:hover, #panel .panel-button:checked:hover { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.25); } + #panel .panel-button:active:hover.clock-display, #panel .panel-button:overview:hover.clock-display, #panel .panel-button:focus:hover.clock-display, #panel .panel-button:checked:hover.clock-display { + box-shadow: none; } + #panel .panel-button:active:hover.clock-display .clock, #panel .panel-button:overview:hover.clock-display .clock, #panel .panel-button:focus:hover.clock-display .clock, #panel .panel-button:checked:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.25); } + #panel .panel-button:active:hover.screen-recording-indicator, #panel .panel-button:overview:hover.screen-recording-indicator, #panel .panel-button:focus:hover.screen-recording-indicator, #panel .panel-button:checked:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.8); } #panel .panel-button .system-status-icon { icon-size: 1.09em; padding: 5px; @@ -1251,12 +1458,30 @@ StScrollBar { -st-icon-style: symbolic; } #panel .panel-button#panelActivities { -natural-hpadding: 18px; } - #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked { + #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } - #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display { + #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display { box-shadow: none; } - #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock { + #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } + #panel.unlock-screen .panel-button:active.screen-recording-indicator, #panel.unlock-screen .panel-button:overview.screen-recording-indicator, #panel.unlock-screen .panel-button:focus.screen-recording-indicator, #panel.unlock-screen .panel-button:checked.screen-recording-indicator, #panel.login-screen .panel-button:active.screen-recording-indicator, #panel.login-screen .panel-button:overview.screen-recording-indicator, #panel.login-screen .panel-button:focus.screen-recording-indicator, #panel.login-screen .panel-button:checked.screen-recording-indicator, #panel:overview .panel-button:active.screen-recording-indicator, #panel:overview .panel-button:overview.screen-recording-indicator, #panel:overview .panel-button:focus.screen-recording-indicator, #panel:overview .panel-button:checked.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.85); } + #panel.unlock-screen .panel-button:hover, #panel.login-screen .panel-button:hover, #panel:overview .panel-button:hover { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); } + #panel.unlock-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel:overview .panel-button:hover.clock-display { + box-shadow: none; } + #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); } + #panel.unlock-screen .panel-button:hover.screen-recording-indicator, #panel.login-screen .panel-button:hover.screen-recording-indicator, #panel:overview .panel-button:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.9); } + #panel.unlock-screen .panel-button:active:hover, #panel.unlock-screen .panel-button:overview:hover, #panel.unlock-screen .panel-button:focus:hover, #panel.unlock-screen .panel-button:checked:hover, #panel.login-screen .panel-button:active:hover, #panel.login-screen .panel-button:overview:hover, #panel.login-screen .panel-button:focus:hover, #panel.login-screen .panel-button:checked:hover, #panel:overview .panel-button:active:hover, #panel:overview .panel-button:overview:hover, #panel:overview .panel-button:focus:hover, #panel:overview .panel-button:checked:hover { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel.unlock-screen .panel-button:active:hover.clock-display, #panel.unlock-screen .panel-button:overview:hover.clock-display, #panel.unlock-screen .panel-button:focus:hover.clock-display, #panel.unlock-screen .panel-button:checked:hover.clock-display, #panel.login-screen .panel-button:active:hover.clock-display, #panel.login-screen .panel-button:overview:hover.clock-display, #panel.login-screen .panel-button:focus:hover.clock-display, #panel.login-screen .panel-button:checked:hover.clock-display, #panel:overview .panel-button:active:hover.clock-display, #panel:overview .panel-button:overview:hover.clock-display, #panel:overview .panel-button:focus:hover.clock-display, #panel:overview .panel-button:checked:hover.clock-display { + box-shadow: none; } + #panel.unlock-screen .panel-button:active:hover.clock-display .clock, #panel.unlock-screen .panel-button:overview:hover.clock-display .clock, #panel.unlock-screen .panel-button:focus:hover.clock-display .clock, #panel.unlock-screen .panel-button:checked:hover.clock-display .clock, #panel.login-screen .panel-button:active:hover.clock-display .clock, #panel.login-screen .panel-button:overview:hover.clock-display .clock, #panel.login-screen .panel-button:focus:hover.clock-display .clock, #panel.login-screen .panel-button:checked:hover.clock-display .clock, #panel:overview .panel-button:active:hover.clock-display .clock, #panel:overview .panel-button:overview:hover.clock-display .clock, #panel:overview .panel-button:focus:hover.clock-display .clock, #panel:overview .panel-button:checked:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel.unlock-screen .panel-button:active:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:overview:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:focus:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:checked:hover.screen-recording-indicator, #panel.login-screen .panel-button:active:hover.screen-recording-indicator, #panel.login-screen .panel-button:overview:hover.screen-recording-indicator, #panel.login-screen .panel-button:focus:hover.screen-recording-indicator, #panel.login-screen .panel-button:checked:hover.screen-recording-indicator, #panel:overview .panel-button:active:hover.screen-recording-indicator, #panel:overview .panel-button:overview:hover.screen-recording-indicator, #panel:overview .panel-button:focus:hover.screen-recording-indicator, #panel:overview .panel-button:checked:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.8); } #panel .panel-status-indicators-box, #panel .panel-status-menu-box { spacing: 2px; } @@ -1275,6 +1500,12 @@ StScrollBar { padding: 0 6px; spacing: 6px; } +.clock-display-box { + spacing: 2px; } + .clock-display-box .clock { + padding-left: 12px; + padding-right: 12px; } + /* Activities Ripple */ .ripple-box { background-color: rgba(243, 247, 255, 0.3); @@ -1305,22 +1536,21 @@ StScrollBar { border-radius: 99px; padding: 6px 12px; } -.window-close { - background-color: #303340; +.window-close, .screenshot-ui-close-button { + background-color: rgba(41, 44, 55, 0.95); color: white; border-radius: 21px; padding: 3px; height: 30px; width: 30px; - box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5); transition-duration: 300ms; } - .window-close StIcon { + .window-close StIcon, .screenshot-ui-close-button StIcon { icon-size: 24px; } - .window-close:hover { - background-color: #51576b; } - .window-close:active { + .window-close:hover, .screenshot-ui-close-button:hover { + background-color: rgba(76, 79, 88, 0.9575); } + .window-close:active, .screenshot-ui-close-button:active { color: rgba(255, 255, 255, 0.8); - background-color: #252831; } + background-color: rgba(30, 33, 40, 0.95); } .workspace-background { border-radius: 30px; @@ -1328,30 +1558,35 @@ StScrollBar { .search-entry { - width: 320px; - padding: 7px 9px; border-radius: 18px; - color: rgba(92, 97, 108, 0.7); - background-color: #ffffff; margin-top: 12px; margin-bottom: 6px; - border-width: 2px; - border-color: transparent; } + padding: 7px 9px; + width: 320px; + background-color: white; + color: rgba(92, 97, 108, 0.7); + border: 2px solid white; } .search-entry:hover { - background-color: #f7f7f7; - color: #50555e; } + background-color: white; + border-color: white; + color: rgba(92, 97, 108, 0.7); } .search-entry:focus { - border-style: solid; + background-color: #f4f8ff; border-color: #2777ff; - color: #5c616c; - box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); } + color: #5c616c; } + + .search-entry:insensitive { + background-color: white; + border-color: white; + color: #aeb0b6; } .search-entry .search-entry-icon { + color: inherit; icon-size: 1.09em; - padding: 0 4px; - color: inherit; } + margin-top: 2px; + padding: 0 4px; } /* Search */ #searchResultsContent { @@ -1361,25 +1596,42 @@ StScrollBar { .search-section { spacing: 8px; } .search-section .search-section-separator { - height: 0; + height: 8px; background-color: transparent; } .search-section-content { - background-color: rgba(59, 63, 78, 0.8); - border-radius: 19px; + background-color: #323643; + border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.2); + box-shadow: none; + text-shadow: none; color: white; - padding: 18px; - spacing: 8px; } + padding: 12px; + margin: 4px; } -.list-search-result:focus, .search-provider-icon:focus, .list-search-result:hover, .search-provider-icon:hover, .list-search-result:selected, .search-provider-icon:selected { - background-color: rgba(255, 255, 255, 0.1); - transition-duration: 200ms; } - -.list-search-result:active, .search-provider-icon:active, .list-search-result:checked, .search-provider-icon:checked { - background-color: rgba(26, 28, 35, 0.9); } +.list-search-result, .search-provider-icon { + background-color: transparent; + margin: 4px; + border-radius: 8px !important; } + .list-search-result:hover, .search-provider-icon:hover { + background-color: rgba(255, 255, 255, 0.1); } + .list-search-result:selected, .search-provider-icon:selected, .list-search-result:focus, .search-provider-icon:focus { + background-color: rgba(255, 255, 255, 0.13); } + .list-search-result:selected:hover, .search-provider-icon:selected:hover, .list-search-result:focus:hover, .search-provider-icon:focus:hover { + background-color: rgba(255, 255, 255, 0.16); } + .list-search-result:selected:active, .search-provider-icon:selected:active, .list-search-result:focus:active, .search-provider-icon:focus:active { + background-color: rgba(255, 255, 255, 0.13); } + .list-search-result:active, .search-provider-icon:active { + background-color: rgba(255, 255, 255, 0.16); } + .list-search-result:outlined, .search-provider-icon:outlined, .list-search-result:checked, .search-provider-icon:checked { + background-color: rgba(255, 255, 255, 0.19); } + .list-search-result:outlined:active, .search-provider-icon:outlined:active, .list-search-result:checked:active, .search-provider-icon:checked:active { + background-color: rgba(255, 255, 255, 0.22); } + .list-search-result:outlined:hover, .search-provider-icon:outlined:hover, .list-search-result:checked:hover, .search-provider-icon:checked:hover { + background-color: rgba(255, 255, 255, 0.25); } + .list-search-result:drop, .search-provider-icon:drop { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } .grid-search-results { spacing: 36px; } @@ -1388,8 +1640,7 @@ StScrollBar { spacing: 12px; } .search-provider-icon .list-search-provider-content .list-search-provider-details { width: 120px; - margin-top: 0; - color: #ebebeb; } + color: white; } .list-search-results { spacing: 6px; } @@ -1401,13 +1652,11 @@ StScrollBar { spacing: 12px; } .list-search-result .list-search-result-description { - color: #b3b3b3; } + color: #97999f; } /* Dash */ #dash { - font-size: 8pt; - margin-top: 18px; - padding: 0 10px; } + margin: 2em; } #dash .placeholder { background-image: none; background-size: contain; @@ -1415,22 +1664,49 @@ StScrollBar { #dash .empty-dash-drop-target { width: 32px; height: 32px; } - #dash .overview-icon { - padding: 5px; } + #dash .app-well-app-running-dot { + margin-bottom: 15px; } .dash-background { - background-color: #3b3b3b; - margin-bottom: 16px; - padding: 10px; - border-radius: 24px; } + background-color: #323643; + border-radius: 28px; + padding: 12px; + spacing: 6px; } -.dash-item-container .app-well-app, .show-apps { - padding: 10px 1.5px 26px; } +.dash-item-container .app-well-app .overview-icon, .dash-item-container .grid-search-result .overview-icon { + margin: 0 4px; + padding: 6px; } + +.dash-item-container .show-apps .overview-icon { + background-color: transparent; } + +.dash-item-container .show-apps:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.1); } + +.dash-item-container .show-apps:selected .overview-icon, .dash-item-container .show-apps:focus .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + .dash-item-container .show-apps:selected .overview-icon:hover .overview-icon, .dash-item-container .show-apps:focus .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + .dash-item-container .show-apps:selected .overview-icon:active .overview-icon, .dash-item-container .show-apps:focus .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + +.dash-item-container .show-apps:active .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + +.dash-item-container .show-apps:outlined .overview-icon, .dash-item-container .show-apps:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + .dash-item-container .show-apps:outlined .overview-icon:active .overview-icon, .dash-item-container .show-apps:checked .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.22); } + .dash-item-container .show-apps:outlined .overview-icon:hover .overview-icon, .dash-item-container .show-apps:checked .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.25); } + +.dash-item-container .show-apps:drop .overview-icon { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } .dash-separator { width: 1px; - margin: 0 6.5px 16px; - background-color: rgba(255, 255, 255, 0.3); } + background-color: #d9d9d9; } .dash-label { color: white; @@ -1438,27 +1714,7 @@ StScrollBar { border-radius: 99px; padding: 6px 12px; text-align: center; - -y-offset: 12px; } - -.show-apps .overview-icon { - color: white; } - -.show-apps:hover .overview-icon, .show-apps:selected .overview-icon { - background-color: rgba(255, 255, 255, 0.1); } - -.show-apps:focus .overview-icon { - background-color: rgba(255, 255, 255, 0.3); } - -.show-apps:drop .overview-icon { - border: 2px solid #2777ff; - background-color: rgba(39, 119, 255, 0.2); } - -.show-apps:active .overview-icon, .show-apps:checked .overview-icon { - background-color: rgba(26, 28, 35, 0.5); } - -.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { - background-color: rgba(48, 51, 64, 0.5); - color: #5c616c; } + -y-offset: 8px; } /* App Grid */ .icon-grid { @@ -1472,64 +1728,108 @@ StScrollBar { page-padding-right: 12px; } /* App Icons */ -.app-well-app .overview-icon, -.grid-search-result .overview-icon { - color: #fff; } +.app-well-app .overview-icon, .grid-search-result .overview-icon { + background-color: transparent; } -.app-well-app:hover .overview-icon, .app-well-app:selected .overview-icon, -.grid-search-result:hover .overview-icon, -.grid-search-result:selected .overview-icon { +.app-well-app:hover .overview-icon, .grid-search-result:hover .overview-icon { background-color: rgba(255, 255, 255, 0.1); } -.app-well-app:focus .overview-icon, -.grid-search-result:focus .overview-icon { - background-color: rgba(255, 255, 255, 0.3); } +.app-well-app:selected .overview-icon, .grid-search-result:selected .overview-icon, .app-well-app:focus .overview-icon, .grid-search-result:focus .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + .app-well-app:selected .overview-icon:hover .overview-icon, .grid-search-result:selected .overview-icon:hover .overview-icon, .app-well-app:focus .overview-icon:hover .overview-icon, .grid-search-result:focus .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + .app-well-app:selected .overview-icon:active .overview-icon, .grid-search-result:selected .overview-icon:active .overview-icon, .app-well-app:focus .overview-icon:active .overview-icon, .grid-search-result:focus .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } -.app-well-app:drop .overview-icon, -.grid-search-result:drop .overview-icon { - border: 2px solid #2777ff; +.app-well-app:active .overview-icon, .grid-search-result:active .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + +.app-well-app:outlined .overview-icon, .grid-search-result:outlined .overview-icon, .app-well-app:checked .overview-icon, .grid-search-result:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + .app-well-app:outlined .overview-icon:active .overview-icon, .grid-search-result:outlined .overview-icon:active .overview-icon, .app-well-app:checked .overview-icon:active .overview-icon, .grid-search-result:checked .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.22); } + .app-well-app:outlined .overview-icon:hover .overview-icon, .grid-search-result:outlined .overview-icon:hover .overview-icon, .app-well-app:checked .overview-icon:hover .overview-icon, .grid-search-result:checked .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.25); } + +.app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon { + border: 2px solid rgba(39, 119, 255, 0.8); background-color: rgba(39, 119, 255, 0.2); } -.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, -.grid-search-result:active .overview-icon, -.grid-search-result:checked .overview-icon { - background-color: rgba(26, 28, 35, 0.5); } +.app-well-app .overview-icon, .grid-search-result .overview-icon { + padding: 12px; } -.app-well-app .overview-icon.overview-icon-with-label, -.grid-search-result .overview-icon.overview-icon-with-label { - padding: 10px 8px 5px 8px; } - .app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, - .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout { - spacing: 6px; } +.app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout { + spacing: 6px; } -/* App Folders */ -.app-well-app.app-folder { - background-color: #3b3b3b; - border-radius: 12px; } +.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + +.app-well-app.app-folder:hover .overview-icon, .app-folder.grid-search-result:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.1); } + +.app-well-app.app-folder:selected .overview-icon, .app-folder.grid-search-result:selected .overview-icon, .app-well-app.app-folder:focus .overview-icon, .app-folder.grid-search-result:focus .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + .app-well-app.app-folder:selected .overview-icon:hover .overview-icon, .app-folder.grid-search-result:selected .overview-icon:hover .overview-icon, .app-well-app.app-folder:focus .overview-icon:hover .overview-icon, .app-folder.grid-search-result:focus .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + .app-well-app.app-folder:selected .overview-icon:active .overview-icon, .app-folder.grid-search-result:selected .overview-icon:active .overview-icon, .app-well-app.app-folder:focus .overview-icon:active .overview-icon, .app-folder.grid-search-result:focus .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + +.app-well-app.app-folder:active .overview-icon, .app-folder.grid-search-result:active .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + +.app-well-app.app-folder:outlined .overview-icon, .app-folder.grid-search-result:outlined .overview-icon, .app-well-app.app-folder:checked .overview-icon, .app-folder.grid-search-result:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + .app-well-app.app-folder:outlined .overview-icon:active .overview-icon, .app-folder.grid-search-result:outlined .overview-icon:active .overview-icon, .app-well-app.app-folder:checked .overview-icon:active .overview-icon, .app-folder.grid-search-result:checked .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.22); } + .app-well-app.app-folder:outlined .overview-icon:hover .overview-icon, .app-folder.grid-search-result:outlined .overview-icon:hover .overview-icon, .app-well-app.app-folder:checked .overview-icon:hover .overview-icon, .app-folder.grid-search-result:checked .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.25); } + +.app-well-app.app-folder:drop .overview-icon, .app-folder.grid-search-result:drop .overview-icon { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } .app-folder-dialog { - border-radius: 24px; - background-color: #3b3b3b; + border-radius: 32px; + background-color: #323643; padding: 12px 0px 12px 0px; } .app-folder-dialog .folder-name-container { padding: 24px 36px 0; spacing: 12px; /* FIXME: this is to keep the label in sync with the entry */ } - .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry { - font-size: 18pt; - font-weight: 800; } .app-folder-dialog .folder-name-container .folder-name-entry { width: 300px; } .app-folder-dialog .folder-name-container .folder-name-label { padding: 5px 7px; color: white; } .app-folder-dialog .folder-name-container .edit-folder-button { - padding: 0; + background-color: transparent; + background-color: none; width: 36px; height: 36px; border-radius: 18px; } + .app-folder-dialog .folder-name-container .edit-folder-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } + .app-folder-dialog .folder-name-container .edit-folder-button:focus { + color: #5c616c; + background-color: #e2eaf9; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .app-folder-dialog .folder-name-container .edit-folder-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .app-folder-dialog .folder-name-container .edit-folder-button:hover { + color: #5c616c; + background-color: white; } + .app-folder-dialog .folder-name-container .edit-folder-button:active { + color: #5c616c; + background-color: white; } .app-folder-dialog .folder-name-container .edit-folder-button > StIcon { - icon-size: 16px; } + icon-size: 1.09em; } .app-folder-dialog .icon-grid { row-spacing: 12px; column-spacing: 30px; @@ -1549,17 +1849,14 @@ StScrollBar { height: 5px; width: 5px; border-radius: 5px; - background-color: white; - margin-bottom: 1px; } + margin-bottom: 8px; + background-color: white; } .rename-folder-popup .rename-folder-popup-item { spacing: 6px; } .rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl { padding: 0 12px; } -.app-menu { - max-width: 27.25em; } - .page-indicator { padding: 6px 12px 0; } .page-indicator .page-indicator-icon { @@ -1585,12 +1882,12 @@ StScrollBar { background-gradient-start: rgba(255, 255, 255, 0.05); background-gradient-end: transparent; background-gradient-direction: horizontal; - border-radius: 15px 0px 0px 15px; } + border-radius: 24px 0px 0px 24px; } .page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl { background-gradient-start: transparent; background-gradient-end: rgba(255, 255, 255, 0.05); background-gradient-direction: horizontal; - border-radius: 0px 15px 15px 0px; } + border-radius: 0px 24px 24px 0px; } .page-navigation-arrow { margin: 6px; @@ -1674,7 +1971,6 @@ StScrollBar { .caps-lock-warning-label { text-align: center; padding-bottom: 8px; - font-size: 9pt; color: #fd7d00; } /* Workspace animation */ @@ -1686,18 +1982,9 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.5); border: 1px solid #2777ff; } -.tile-preview-left.on-primary { - border-radius: 9px 0 0 0; } - -.tile-preview-right.on-primary { - border-radius: 0 9px 0 0; } - -.tile-preview-left.tile-preview-right.on-primary { - border-radius: 9px 9px 0 0; } - /* On-screen Keyboard */ #keyboard { - background-color: rgba(242, 242, 242, 0.9); + background-color: #303340; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); } #keyboard .page-indicator { padding: 6px; } @@ -1710,124 +1997,107 @@ StScrollBar { spacing: 4px; } .keyboard-key { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - font-size: 15pt; + font-size: 16pt; + font-weight: bold; min-height: 1.2em; min-width: 1.2em; border-width: 1px; border-style: solid; - border-radius: 11px; } + border-radius: 12px; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); + color: white; + background-color: #545454; } .keyboard-key:focus { - color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + color: white; + background-color: #35415b; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .keyboard-key:hover, .keyboard-key:checked { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + .keyboard-key:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-key:focus:active { + background-color: #434f6d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-key:hover { + color: white; + background-color: #5e5e5e; } .keyboard-key:active { - color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: white; + background-color: #666666; } + .keyboard-key:checked { + color: white; + background-color: #737373; } .keyboard-key:grayed { background-color: #f7f7f7; color: white; border-color: black; } .keyboard-key.default-key { - color: #5c616c; - background-color: #1e2128; - border-color: black; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .keyboard-key.default-key:hover, .keyboard-key.default-key:checked { - color: #5c616c; - background-color: #292c37; - border-color: black; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + color: white; + background-color: #383838; + border-radius: 12px; } + .keyboard-key.default-key:hover { + color: white; + background-color: #424242; } .keyboard-key.default-key:active { - color: #5c616c; - background-color: #111217; - border-color: black; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: white; + background-color: #4a4a4a; } + .keyboard-key.default-key:checked { + color: white; + background-color: #575757; } .keyboard-key.enter-key { color: #ffffff; background-color: #3681ff; - border-color: #004bca; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked { - color: #5c616c; - background-color: #5f9aff; - border-color: #005efd; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + border-radius: 12px; + color: white; } + .keyboard-key.enter-key:hover { + color: #ffffff; + background-color: #4b8eff; } .keyboard-key.enter-key:active { - color: #5c616c; - background-color: #0e67ff; - border-color: #0047c0; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: #ffffff; + background-color: #5a97ff; } + .keyboard-key.enter-key:checked { + color: #ffffff; + background-color: #74a7ff; } .keyboard-key.shift-key-uppercase { - color: #2777ff; } + background-color: gray; + color: #303340; } + .keyboard-key.shift-key-uppercase:hover { + background-color: #8c8c8c; + color: #3b3f4e; } .keyboard-key StIcon { - icon-size: 1.125em; } + icon-size: 24px; } .keyboard-subkeys { - color: white; -arrow-border-radius: 16px; -arrow-background-color: #303340; -arrow-border-width: 1px; -arrow-border-color: #43495a; -arrow-base: 20px; -arrow-rise: 10px; - -boxpointer-gap: 6px; } + -boxpointer-gap: 6px; + padding: 6px; } .keyboard-subkeys .keyboard-key { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - border-radius: 8px; } + color: white; + background-color: #545454; + border-radius: 12px; } .keyboard-subkeys .keyboard-key:focus { - color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + color: white; + background-color: #35415b; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + .keyboard-subkeys .keyboard-key:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-subkeys .keyboard-key:focus:active { + background-color: #434f6d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-subkeys .keyboard-key:hover { + color: white; + background-color: #5e5e5e; } .keyboard-subkeys .keyboard-key:active { - color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: white; + background-color: #666666; } + .keyboard-subkeys .keyboard-key:checked { + color: white; + background-color: #737373; } .emoji-page .keyboard-key { background-color: transparent; @@ -1839,44 +2109,84 @@ StScrollBar { background-color: #2777ff; } .word-suggestions { - font-size: 13pt; + font-size: 14pt; spacing: 12px; - min-height: 20pt; } + min-height: 20pt; + padding: 12px; + color: white; } + .word-suggestions StButton { + margin: 0 3px; + min-width: 32px; + border-radius: 6px; + padding: 6px 18px; + background-color: transparent; + background-image: none; } + .word-suggestions StButton:focus { + color: white; + background-color: #35415b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .word-suggestions StButton:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .word-suggestions StButton:focus:active { + background-color: #434f6d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .word-suggestions StButton:hover { + color: white; + background-color: #5e5e5e; } + .word-suggestions StButton:active { + color: white; + background-color: #666666; } + .word-suggestions StButton:checked { + color: white; + background-color: #737373; } /* Looking Glass */ #LookingGlassDialog { background-color: #303340; + border-radius: 0 0 16px 16px; + border-top-width: 0; + border: 1px solid rgba(255, 255, 255, 0.1); + color: white; + padding: 6px; spacing: 6px; - padding: 4px; - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 8px; - color: white; } + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } #LookingGlassDialog > #Toolbar { border: none; - border-radius: 8px; - background-color: #303340; } + padding: 6px; + border-radius: 0; + background-color: transparent; + spacing: 6px; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button { + padding: 6px 12px; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button > StIcon { + icon-size: 1.09em; } #LookingGlassDialog .labels { spacing: 6px; } #LookingGlassDialog .notebook-tab { -natural-hpadding: 12px; - -minimum-hpadding: 6px; + -minimum-hpadding: 12px; font-weight: bold; + padding: 6px 12px; color: #d9d9d9; transition-duration: 100ms; - padding-left: .3em; - padding-right: .3em; - border-bottom-width: 2px; } + box-shadow: none; + border: none; + border-radius: 6px; + background-color: transparent; } #LookingGlassDialog .notebook-tab:hover { - color: white; } + color: white; + background-color: rgba(255, 255, 255, 0.05); } #LookingGlassDialog .notebook-tab:selected { - border-bottom-width: 2px; - box-shadow: inset 0 -2px 0 0 #4187ff; - color: white; } + color: white; + background-color: rgba(255, 255, 255, 0.1); } #LookingGlassDialog StBoxLayout#EvalBox { padding: 4px; - spacing: 6px; } + spacing: 6px; + padding: 6px; } #LookingGlassDialog StBoxLayout#ResultsArea { - spacing: 6px; } + spacing: 6px; + padding: 6px; } .lg-dialog StEntry { background-color: rgba(59, 63, 78, 0.6); @@ -1894,14 +2204,13 @@ StScrollBar { color: #0047c0; } .lg-dialog .actor-link { - color: #ccc; } + color: #aeb0b6; } .lg-dialog .actor-link:hover { - color: white; } + color: #e4e4e6; } .lg-dialog .actor-link:active { - color: #999999; } + color: #787c86; } .lg-completions-text { - font-size: .9em; font-style: italic; } .lg-obj-inspector-title { @@ -1915,20 +2224,35 @@ StScrollBar { border: 1px solid #ffffff; } #lookingGlassExtensions { - padding: 4px; } + padding: 6px; } .lg-extensions-list { - padding: 4px; + padding: 6px; spacing: 6px; } .lg-extension { - border: 1px solid #0d0d0d; - background-color: #3b3f4e; + padding: 12px; border-radius: 8px; - padding: 4px; } - -.lg-extension-name { - font-weight: bold; } + margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + color: #5c616c; + background-color: #f7f7f8; } + .lg-extension:focus { + color: #5c616c; + background-color: #e2eaf9; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .lg-extension:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .lg-extension:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .lg-extension:hover { + color: #5c616c; + background-color: white; } + .lg-extension:active { + color: #5c616c; + background-color: white; } .lg-extension-meta { spacing: 6px; } @@ -1939,6 +2263,19 @@ StScrollBar { border-radius: 8px; padding: 6px; } +.lg-debug-flag-button { + color: #5c616c; } + .lg-debug-flag-button StLabel { + padding: 6px, 12px; } + .lg-debug-flag-button:hover { + color: #8f949f; } + .lg-debug-flag-button:active { + color: #2d3035; } + +.lg-debug-flags-header { + padding-top: 12px; + padding: 6px; } + /* Login Dialog */ .login-dialog-banner-view { padding-top: 24px; @@ -1970,56 +2307,33 @@ StScrollBar { border-color: #1c1e25; } .login-dialog .modal-dialog-button:insensitive, .unlock-dialog .modal-dialog-button:insensitive { - color: #aeb0b6; - border-color: #d9d9d9; - background-color: #fdfdfd; - box-shadow: none; - text-shadow: none; - icon-shadow: none; + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); border-color: #1c1e25; background-color: #1c1e25; color: rgba(255, 255, 255, 0.7); } .login-dialog .modal-dialog-button:default, .unlock-dialog .modal-dialog-button:default { - color: #ffffff; - background-color: #3681ff; - border-color: #004bca; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - border-color: #2777ff; } + background-color: #2777ff; + color: #ffffff; } + .login-dialog .modal-dialog-button:default:focus, + .unlock-dialog .modal-dialog-button:default:focus { + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, .unlock-dialog .modal-dialog-button:default:hover, .unlock-dialog .modal-dialog-button:default:focus { - color: #ffffff; - background-color: #5091ff; - border-color: #0058ee; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); background-color: #4187ff; - border-color: #4187ff; } + color: white; } .login-dialog .modal-dialog-button:default:active, .unlock-dialog .modal-dialog-button:default:active { - color: #ffffff; - background-color: #186eff; - border-color: #004bca; - text-shadow: none; - icon-shadow: none; - box-shadow: none; - background-color: #0e67ff; - border-color: #0e67ff; } + background-color: #0361ff; + color: #ededed; } .login-dialog .modal-dialog-button:default:insensitive, .unlock-dialog .modal-dialog-button:default:insensitive { - color: #aeb0b6; - border-color: #d9d9d9; - background-color: #fdfdfd; - box-shadow: none; - text-shadow: none; - icon-shadow: none; - border-color: #005af3; - background-color: #005af3; - color: rgba(255, 255, 255, 0.7); } + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: rgba(39, 119, 255, 0.5); + color: rgba(255, 255, 255, 0.5); } .login-dialog .cancel-button, .login-dialog .switch-user-button, .login-dialog .login-dialog-session-list-button, @@ -2067,11 +2381,39 @@ StScrollBar { color: white; } .login-dialog-not-listed-label { - font-size: 9pt; font-weight: bold; color: #b3b3b3; padding-top: 1em; } +.login-dialog-auth-list-view { + -st-vfade-offset: 1em; } + +.login-dialog-auth-list { + spacing: 6px; + margin-left: 2em; } + +.login-dialog-auth-list-title { + margin-left: 2em; } + +.login-dialog-auth-list-item { + border-radius: 12px; + padding: 6px; + color: #b3b3b3; } + .login-dialog-auth-list-item:focus, .login-dialog-auth-list-item:selected { + background-color: #2777ff; + color: #ffffff; } + +.login-dialog-auth-list-label { + font-size: 13pt; + font-weight: bold; + padding-left: 15px; } + .login-dialog-auth-list-label:ltr { + padding-left: 14px; + text-align: left; } + .login-dialog-auth-list-label:rtl { + padding-right: 14px; + text-align: right; } + .login-dialog-user-list-view { -st-vfade-offset: 1em; } @@ -2103,7 +2445,7 @@ StScrollBar { color: white; } .user-widget.horizontal .user-widget-label { - font-size: 12pt; + font-size: 13pt; font-weight: bold; padding-left: 15px; } .user-widget.horizontal .user-widget-label:ltr { @@ -2114,7 +2456,7 @@ StScrollBar { text-align: right; } .user-widget.vertical .user-widget-label { - font-size: 15pt; + font-size: 16pt; text-align: center; font-weight: normal; padding-top: 16px; } @@ -2134,9 +2476,23 @@ StScrollBar { .login-dialog-prompt-label { color: #cccccc; - font-size: 11pt; + font-size: 12pt; padding-top: 1em; } +.unlock-dialog StEntry { + border: none !important; } + .unlock-dialog StEntry:focus { + background-color: rgba(92, 97, 108, 0.1); } + .unlock-dialog StEntry:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); } + +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { + border-color: transparent; + background-color: rgba(92, 97, 108, 0.1); } + /* Screen Shield */ .unlock-dialog-clock { color: white; @@ -2147,8 +2503,7 @@ StScrollBar { .unlock-dialog-clock-time { font-size: 64pt; - padding-top: 42px; - font-feature-settings: "tnum"; } + padding-top: 42px; } .unlock-dialog-clock-date { font-size: 16pt; @@ -2159,7 +2514,7 @@ StScrollBar { padding-top: 48px; } .unlock-dialog-notifications-container { - margin: 12px 0; + margin: 12px; spacing: 6px; width: 23em; background-color: transparent; } @@ -2168,29 +2523,28 @@ StScrollBar { padding-bottom: 0; } .unlock-dialog-notifications-container .notification, .unlock-dialog-notifications-container .unlock-dialog-notification-source { - padding: 12px 6px; + padding: 12px 16px; border: none; - background-color: rgba(48, 51, 64, 0.3); + background-color: rgba(255, 255, 255, 0.1); color: white; border-radius: 16px; } .unlock-dialog-notifications-container .notification.critical, .unlock-dialog-notifications-container .unlock-dialog-notification-source.critical { - background-color: rgba(48, 51, 64, 0.9); } + background-color: rgba(255, 255, 255, 0.2); } .unlock-dialog-notification-label { - padding: 0px 0px 0px 12px; } + padding: 0 0 0 12px; } .unlock-dialog-notification-count-text { - weight: bold; - padding: 0 6px; - color: #303340; - background-color: rgba(255, 255, 255, 0.3); - border-radius: 99px; - margin-right: 12px; } + font-weight: bold; + padding: 0 12px; + color: white; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 99px; } .screen-shield-background { background: black; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6); } + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } #lockDialogGroup { background-color: #272a34; } @@ -2203,13 +2557,13 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.5); } /* OSD */ -.osd-window, .resize-popup, .switcher-list, .workspace-switcher-container { +.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel { font-weight: bold; background-color: #ffffff; color: #5c616c; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } - .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher-container StIcon { + .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher StIcon, .screenshot-ui-panel StIcon { color: black; icon-shadow: 0 0 6px rgba(0, 0, 0, 0.4); } @@ -2275,7 +2629,7 @@ StScrollBar { background-color: white; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } -.window-close { +.window-close, .screenshot-ui-close-button { background-image: url("assets/close-window.svg"); background-size: 32px; background-color: transparent; @@ -2284,10 +2638,10 @@ StScrollBar { height: 32px; width: 32px; transition-duration: .2s; } - .window-close:hover { + .window-close:hover, .screenshot-ui-close-button:hover { background-image: url("assets/close-window-hover.svg"); background-color: transparent; } - .window-close:active { + .window-close:active, .screenshot-ui-close-button:active { background-image: url("assets/close-window-active.svg"); background-color: transparent; color: transparent; @@ -2346,32 +2700,30 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .datemenu-today-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .datemenu-today-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .datemenu-today-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .datemenu-today-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .datemenu-today-button:hover { color: #5c616c; background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: none; } .datemenu-today-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .datemenu-today-button .date-label { font-size: 1.5em; font-weight: 300; } @@ -2381,32 +2733,30 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .calendar:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .calendar:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .calendar:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .calendar:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .calendar:hover { color: #5c616c; background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: none; } .calendar:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .calendar .pager-button:hover, .calendar .pager-button:focus { background-color: #eaebec; } .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus, .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { @@ -2428,32 +2778,30 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .events-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .events-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .events-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .events-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .events-button:hover { color: #5c616c; background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: none; } .events-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } /* World clocks */ .world-clocks-button { @@ -2461,64 +2809,60 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .world-clocks-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .world-clocks-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .world-clocks-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .world-clocks-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .world-clocks-button:hover { color: #5c616c; background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: none; } .world-clocks-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .weather-button { border-width: 1px; border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .weather-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .weather-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .weather-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .weather-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .weather-button:hover { color: #5c616c; background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: none; } .weather-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } /* Search */ .search-entry { @@ -2579,10 +2923,10 @@ StScrollBar { color: black; } /* App Folders */ -.app-well-app.app-folder, .app-well-app.app-folder .overview-icon.overview-icon-with-label { +.app-well-app.app-folder, .app-folder.grid-search-result, .app-well-app.app-folder .overview-icon.overview-icon-with-label, .app-folder.grid-search-result .overview-icon.overview-icon-with-label { background-color: rgba(255, 255, 255, 0.1); } -.app-well-app.app-folder:checked { +.app-well-app.app-folder:checked, .app-folder.grid-search-result:checked { background: black; } .app-folder-dialog { From 886215c7cd7cc20548ce8d3af2cafc4a2e27d7a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Mon, 28 Feb 2022 22:08:29 +0100 Subject: [PATCH 03/34] Gnome-Shell: reduce font size --- .../Kali-Dark/gnome-shell/gnome-shell.css | 22 +++++++++---------- .../Kali-Light/gnome-shell/gnome-shell.css | 22 +++++++++---------- .../upstream/gnome-shell-sass/_common.scss | 2 +- .../gnome-shell-sass/_common.scss.patch | 4 ++++ 4 files changed, 27 insertions(+), 23 deletions(-) create mode 100644 src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index b9d16bdb..719f7ff8 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -19,7 +19,7 @@ */ /* Global Values */ stage { - font-size: 11pt; + font-size: 10pt; color: #eeeeec; } /* Common Stylings */ @@ -599,7 +599,7 @@ StScrollBar { background-image: url("assets/calendar-today.svg"); background-size: contain; } .calendar .calendar-week-number { - font-size: 7pt; + font-size: 6pt; font-weight: bold; font-feature-settings: "tnum"; margin: 6px; @@ -814,7 +814,7 @@ StScrollBar { padding: 0 8px; } .message .message-secondary-bin > .event-time { color: rgba(238, 238, 236, 0.5); - font-size: 9pt; + font-size: 8pt; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } .message .message-secondary-bin > .event-time:ltr { @@ -919,7 +919,7 @@ StScrollBar { spacing: 0; } .summary-source-counter { - font-size: 10pt; + font-size: 9pt; font-weight: bold; height: 1.6em; width: 1.6em; @@ -958,7 +958,7 @@ StScrollBar { .chat-meta-message { padding-left: 4px; - font-size: 9pt; + font-size: 8pt; font-weight: bold; color: white; } .chat-meta-message:rtl { @@ -1997,7 +1997,7 @@ StScrollBar { spacing: 4px; } .keyboard-key { - font-size: 16pt; + font-size: 15pt; font-weight: bold; min-height: 1.2em; min-width: 1.2em; @@ -2109,7 +2109,7 @@ StScrollBar { background-color: #2777ff; } .word-suggestions { - font-size: 14pt; + font-size: 13pt; spacing: 12px; min-height: 20pt; padding: 12px; @@ -2404,7 +2404,7 @@ StScrollBar { color: #ffffff; } .login-dialog-auth-list-label { - font-size: 13pt; + font-size: 12pt; font-weight: bold; padding-left: 15px; } .login-dialog-auth-list-label:ltr { @@ -2445,7 +2445,7 @@ StScrollBar { color: white; } .user-widget.horizontal .user-widget-label { - font-size: 13pt; + font-size: 12pt; font-weight: bold; padding-left: 15px; } .user-widget.horizontal .user-widget-label:ltr { @@ -2456,7 +2456,7 @@ StScrollBar { text-align: right; } .user-widget.vertical .user-widget-label { - font-size: 16pt; + font-size: 15pt; text-align: center; font-weight: normal; padding-top: 16px; } @@ -2476,7 +2476,7 @@ StScrollBar { .login-dialog-prompt-label { color: #cccccc; - font-size: 12pt; + font-size: 11pt; padding-top: 1em; } .login-dialog StEntry { diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 1aa55ab1..52a70008 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -19,7 +19,7 @@ */ /* Global Values */ stage { - font-size: 11pt; + font-size: 10pt; color: #5c616c; } /* Common Stylings */ @@ -599,7 +599,7 @@ StScrollBar { background-image: url("assets/calendar-today-light.svg"); background-size: contain; } .calendar .calendar-week-number { - font-size: 7pt; + font-size: 6pt; font-weight: bold; font-feature-settings: "tnum"; margin: 6px; @@ -814,7 +814,7 @@ StScrollBar { padding: 0 8px; } .message .message-secondary-bin > .event-time { color: rgba(92, 97, 108, 0.5); - font-size: 9pt; + font-size: 8pt; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } .message .message-secondary-bin > .event-time:ltr { @@ -919,7 +919,7 @@ StScrollBar { spacing: 0; } .summary-source-counter { - font-size: 10pt; + font-size: 9pt; font-weight: bold; height: 1.6em; width: 1.6em; @@ -958,7 +958,7 @@ StScrollBar { .chat-meta-message { padding-left: 4px; - font-size: 9pt; + font-size: 8pt; font-weight: bold; color: #898f9b; } .chat-meta-message:rtl { @@ -1997,7 +1997,7 @@ StScrollBar { spacing: 4px; } .keyboard-key { - font-size: 16pt; + font-size: 15pt; font-weight: bold; min-height: 1.2em; min-width: 1.2em; @@ -2109,7 +2109,7 @@ StScrollBar { background-color: #2777ff; } .word-suggestions { - font-size: 14pt; + font-size: 13pt; spacing: 12px; min-height: 20pt; padding: 12px; @@ -2404,7 +2404,7 @@ StScrollBar { color: #ffffff; } .login-dialog-auth-list-label { - font-size: 13pt; + font-size: 12pt; font-weight: bold; padding-left: 15px; } .login-dialog-auth-list-label:ltr { @@ -2445,7 +2445,7 @@ StScrollBar { color: white; } .user-widget.horizontal .user-widget-label { - font-size: 13pt; + font-size: 12pt; font-weight: bold; padding-left: 15px; } .user-widget.horizontal .user-widget-label:ltr { @@ -2456,7 +2456,7 @@ StScrollBar { text-align: right; } .user-widget.vertical .user-widget-label { - font-size: 16pt; + font-size: 15pt; text-align: center; font-weight: normal; padding-top: 16px; } @@ -2476,7 +2476,7 @@ StScrollBar { .login-dialog-prompt-label { color: #cccccc; - font-size: 12pt; + font-size: 11pt; padding-top: 1em; } .unlock-dialog StEntry { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss index f86de205..fa6f4b40 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss @@ -48,7 +48,7 @@ $checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_colo $checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%)); // fonts -$base_font_size: 11; +$base_font_size: 10; $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2)); // icons diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch new file mode 100644 index 00000000..175bbbe3 --- /dev/null +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch @@ -0,0 +1,4 @@ +51c51 +< $base_font_size: 11; +--- +> $base_font_size: 10; From eb8d00f90269567ce636019dfa1504f74a034a9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Tue, 1 Mar 2022 19:17:36 +0100 Subject: [PATCH 04/34] Gnome-Shell: update theme tweaks for search-entry, search-results, and window-picker --- .../Kali-Dark/gnome-shell/gnome-shell.css | 519 +++++++++--------- .../Kali-Light/gnome-shell/gnome-shell.css | 519 +++++++++--------- .../Kali/sass/gnome-shell/_common-tweaks.scss | 30 +- 3 files changed, 526 insertions(+), 542 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 719f7ff8..0094865d 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2561,71 +2561,109 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.5); } /* OSD */ -.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel { +/* +$_osd_color: if($variant=='light', black, $fg_color); +%osd_panel { font-weight: bold; - background-color: #23252e; - color: #eeeeec; - border: 1px solid #0d0e11; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } - .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher StIcon, .screenshot-ui-panel StIcon { - color: #eeeeec; - icon-shadow: 0 0 6px rgba(0, 0, 0, 0.4); } + background-color: $bg_color; + color: $fg_color; + border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color); + box-shadow: 0 4px 10px transparentize(black, .8); -.osd-window .level { - -barlevel-background-color: rgba(238, 238, 236, 0.1); - -barlevel-active-background-color: #eeeeec; } + StIcon { + color: $_osd_color; + icon-shadow: 0 0 6px transparentize(black, .6); + } +} + +.osd-window { + .level { + -barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9)); + -barlevel-active-background-color: $_osd_color; + } +} /* Slider */ +/* .slider { height: 1.1em; -barlevel-height: .35em; - -barlevel-background-color: #0d0e11; - -barlevel-border-color: #2777ff; - -barlevel-active-background-color: #2777ff; - -barlevel-overdrive-color: #a61414; + -barlevel-background-color: $borders_color; + -barlevel-border-color: $selected_bg_color; + -barlevel-active-background-color: $selected_bg_color; + -barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-separator-width: 0.1em; -barlevel-border-width: 0; - -slider-handle-radius: 0; } + + -slider-handle-radius: 0; +} /* Check Boxes */ -.check-box StBin { - background-image: url("assets/checkbox-off-dark.svg"); } +/* +.check-box { + StBin { + background-image: if($variant == 'light', url("assets/checkbox-off.svg"), + url("assets/checkbox-off-dark.svg")); + } -.check-box:focus StBin { - background-image: url("assets/checkbox-off-focused-dark.svg"); } - -.check-box:checked StBin { - background-image: url("assets/checkbox-dark.svg"); } - -.check-box:focus:checked StBin { - background-image: url("assets/checkbox-focused-dark.svg"); } + &:focus StBin { background-image: if($variant == 'light', url("assets/checkbox-off-focused.svg"), + url("assets/checkbox-off-focused-dark.svg")); } + &:checked StBin { background-image: if($variant == 'light', url("assets/checkbox.svg"), + url("assets/checkbox-dark.svg")); } + &:focus:checked StBin { background-image: if($variant == 'light', url("assets/checkbox-focused.svg"), + url("assets/checkbox-focused-dark.svg")); } +} /* Switches */ +/* .toggle-switch { - background-image: url("assets/toggle-off-dark.svg"); } - .toggle-switch:checked { - background-image: url("assets/toggle-on-dark.svg"); } + background-image: if($variant == 'light', url("assets/toggle-off.svg"), + url("assets/toggle-off-dark.svg")); + &:checked { + background-image: if($variant == 'light', url("assets/toggle-on.svg"), + url("assets/toggle-on-dark.svg")); + } +} -.popup-menu-item.selected, .popup-menu-item:active { - background-color: #3b3e46; - color: #eeeeec; } +// menu items +.popup-menu-item { + &.selected, &:active { + background-color: $popover_hover_color; + color: $fg_color; + } +} /* App Switcher */ -.switcher-list .item-box:outlined { - padding: 6px; - border: 3px solid #2777ff; } +/* +// switcher onscreen panel +.switcher-list { + .item-box { + &:outlined { + padding: 6px; + border: 3px solid $selected_bg_color; + } -.switcher-list .item-box:selected { - background-color: #2777ff; - color: #ffffff; - text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } + &:selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + text-shadow: 0 1px 4px transparentize(black, 0.6); + } + } +} /* Workspace Switcher */ -.ws-switcher-box { - border: none; } +/* +.ws-switcher-box { border: none } -.workspace-switcher-container { - padding: 7px; } +.workspace-switcher-container { padding: 7px; } + +// active workspace in the switcher +.ws-switcher-active-up, +.ws-switcher-active-down, +.ws-switcher-active-left, +.ws-switcher-active-right { + //box-shadow: 0 0px 6px transparentize(black, .5); +} /* Window Picker */ .window-caption { @@ -2651,222 +2689,158 @@ StScrollBar { color: transparent; transition-duration: 0s; } -/* Tiled window previews */ -.tile-preview-left.on-primary, -.tile-preview-right.on-primary, -.tile-preview-left.tile-preview-right.on-primary { - border-radius: 0; } - /* TOP BAR */ +/* #panel { - background: rgba(35, 37, 46, 0.8); - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } - #panel .popup-menu-arrow { - width: 0; } - #panel StIcon { - icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } - #panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview { - background-color: transparent; } - #panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked { - color: white; } - #panel .panel-corner { - -panel-corner-radius: 0; } - #panel .panel-button { - color: white; } - #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked { - color: white; - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } - #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { - box-shadow: none; } - #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } - #panel #panelActivities.panel-button { - margin-left: .4em; } - #panel #panelActivities.panel-button StLabel { - background-image: url("assets/view-grid-symbolic-dark.svg"); + $_panel_bg: transparentize($bg_color, .2); + $_panel_fg: if($variant=='light', black, white); + $_panel_text_shadow: 0 1px 2px transparentize(black, 0.5); + background: $_panel_bg; + text-shadow: $_panel_text_shadow; + + .popup-menu-arrow { width: 0; } + + StIcon { icon-shadow: $_panel_text_shadow; } + + &.unlock-screen, + &.login-screen, + &.lock-screen, + &:overview { + background-color: transparent; + .panel-button { + &, &:hover, &:active, &:focus, &:overview, &:checked { color: white; } + } + } + + .panel-corner { -panel-corner-radius: 0; } + + .panel-button { + color: $_panel_fg; + &:active, &:focus, &:overview, &:checked { + color: $_panel_fg; + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2)); + } + } + + .panel-button.clock-display { + // Move highlight from .panel-button to .clock + &:active, &:overview, &:focus, &:checked { + box-shadow: none; + + .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2)); + } + } + } + + #panelActivities.panel-button { + margin-left: .4em; + StLabel { + background-image: if($variant == 'light', url("assets/view-grid-symbolic.svg"), + url("assets/view-grid-symbolic-dark.svg")); background-size: contain; width: 1.5em; height: 1.5em; - color: transparent; } - #panel #panelActivities.panel-button:overview StLabel { - background-image: url("assets/view-grid-symbolic-dark.svg"); } + color: transparent; + } + + &:overview StLabel { + background-image: url("assets/view-grid-symbolic-dark.svg"); + } + } +} /* Date/Time Menu */ -#calendarArea { - background-image: url("assets/kali-dragon-dark.svg"); - background-size: contain; } +/* +@mixin notification_bubble($flat: false) { + border-width: 1px; + border-style: solid; + border-radius: $base_border_radius + 2px; + margin: $base_margin; -.events-section-title { - padding: 1em; } + @if $flat { + @include button(undecorated); + } @else { + @include button(normal); + } + + &:focus { + @include button(focus); + } + + &:hover { + @include button(hover); + box-shadow: none; + } + + &:active { + @include button(active); + } +} + +// overall menu +#calendarArea { + background-image: if($variant == 'light', url("assets/kali-dragon.svg"), + url("assets/kali-dragon-dark.svg")); + background-size: contain; +} + +.events-section-title { padding: 1em; } .datemenu-today-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - background-color: transparent; - background-color: none; } - .datemenu-today-button:insensitive { - color: rgba(238, 238, 236, 0.5); - background-color: rgba(238, 238, 236, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } - .datemenu-today-button:focus { - color: #eeeeec; - background-color: #2c364c; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .datemenu-today-button:focus:hover { - background-color: #333d54; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .datemenu-today-button:focus:active { - background-color: #39435b; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .datemenu-today-button:hover { - color: #eeeeec; - background-color: #343640; - box-shadow: none; } - .datemenu-today-button:active { - color: #eeeeec; - background-color: #3b3d49; } - .datemenu-today-button .date-label { + @include notification_bubble($flat: true); + + .date-label { font-size: 1.5em; - font-weight: 300; } + font-weight: 300; + } +} .calendar { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - background-color: transparent; - background-color: none; } - .calendar:insensitive { - color: rgba(238, 238, 236, 0.5); - background-color: rgba(238, 238, 236, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } - .calendar:focus { - color: #eeeeec; - background-color: #2c364c; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .calendar:focus:hover { - background-color: #333d54; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .calendar:focus:active { - background-color: #39435b; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .calendar:hover { - color: #eeeeec; - background-color: #343640; - box-shadow: none; } - .calendar:active { - color: #eeeeec; - background-color: #3b3d49; } - .calendar .pager-button:hover, .calendar .pager-button:focus { - background-color: #3b3e46; } - .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus, .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { - color: #eeeeec; - background-color: #3b3e46; } - .calendar .calendar-today:hover, .calendar .calendar-today:focus { - background-color: #3b3e46; - color: #eeeeec; } - .calendar .calendar-today:active, .calendar .calendar-today:selected { - background: #2777ff; - color: #ffffff; } - .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { - background-color: #3b3e46; - color: #eeeeec; } + @include notification_bubble($flat: true); + + .pager-button { + &:hover, &:focus { background-color: $popover_hover_color } + } + + .calendar-day-base { + &:hover, &:focus, + &:active,&:selected { + color: $fg_color; + background-color: $popover_hover_color; + } + } + + .calendar-today { + &:hover,&:focus { + background-color: $popover_hover_color; + color: $fg_color; + } + &:active,&:selected { + background: $selected_bg_color; + color: $selected_fg_color; + &:hover,&:focus { + background-color: $popover_hover_color; + color: $fg_color; + } + } + } +} /* Events */ -.events-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - background-color: transparent; - background-color: none; } - .events-button:insensitive { - color: rgba(238, 238, 236, 0.5); - background-color: rgba(238, 238, 236, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } - .events-button:focus { - color: #eeeeec; - background-color: #2c364c; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .events-button:focus:hover { - background-color: #333d54; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .events-button:focus:active { - background-color: #39435b; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .events-button:hover { - color: #eeeeec; - background-color: #343640; - box-shadow: none; } - .events-button:active { - color: #eeeeec; - background-color: #3b3d49; } +/* +.events-button { @include notification_bubble($flat: true); } /* World clocks */ +/* .world-clocks-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - background-color: transparent; - background-color: none; } - .world-clocks-button:insensitive { - color: rgba(238, 238, 236, 0.5); - background-color: rgba(238, 238, 236, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } - .world-clocks-button:focus { - color: #eeeeec; - background-color: #2c364c; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .world-clocks-button:focus:hover { - background-color: #333d54; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .world-clocks-button:focus:active { - background-color: #39435b; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .world-clocks-button:hover { - color: #eeeeec; - background-color: #343640; - box-shadow: none; } - .world-clocks-button:active { - color: #eeeeec; - background-color: #3b3d49; } + @include notification_bubble($flat: true); +} .weather-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - background-color: transparent; - background-color: none; } - .weather-button:insensitive { - color: rgba(238, 238, 236, 0.5); - background-color: rgba(238, 238, 236, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } - .weather-button:focus { - color: #eeeeec; - background-color: #2c364c; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .weather-button:focus:hover { - background-color: #333d54; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .weather-button:focus:active { - background-color: #39435b; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .weather-button:hover { - color: #eeeeec; - background-color: #343640; - box-shadow: none; } - .weather-button:active { - color: #eeeeec; - background-color: #3b3d49; } + @include notification_bubble($flat: true); +} + /* Search */ .search-entry { @@ -2874,7 +2848,6 @@ StScrollBar { text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); font-weight: bold; background-color: rgba(255, 255, 255, 0.1); - border-radius: 999px; font-size: 1.1em; transition-duration: 200ms; } .search-entry StLabel.hint-text { @@ -2899,46 +2872,66 @@ StScrollBar { icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); } .search-section-content { - background-color: rgba(255, 255, 255, 0.1); - box-shadow: none; - border: none; } + background-color: rgba(255, 255, 255, 0.1); } .search-provider-icon .list-search-provider-content .list-search-provider-details { font-weight: bold; } /* DASHBOARD */ +/* #dash { - color: white; + color: $osd_fg_color; background-color: transparent; border: none; - border-color: transparent; } - #dash .overview-icon StIcon { + border-color: transparent; + + .overview-icon StIcon { color: white; - icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } + icon-shadow: 0 2px 6px transparentize(black, .6); + } +} .dash-background { - background: rgba(255, 255, 255, 0.1); } + background: $overview_transparent_bg; + //box-shadow: 0 2px 8px 0 transparentize(black, .2); +} -.dash-separator { - background: rgba(255, 255, 255, 0.1); } +.dash-separator { background: $overview_transparent_bg; } -.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { - background-color: rgba(255, 255, 255, 0.1); - color: black; } +.show-apps { + &:focus, + &:checked { + .overview-icon { + background-color: $overview_transparent_bg; + color: black; + } + } +} /* App Folders */ -.app-well-app.app-folder, .app-folder.grid-search-result, .app-well-app.app-folder .overview-icon.overview-icon-with-label, .app-folder.grid-search-result .overview-icon.overview-icon-with-label { - background-color: rgba(255, 255, 255, 0.1); } +/* +.app-well-app.app-folder { + &, & .overview-icon.overview-icon-with-label { + background-color: $overview_transparent_bg + } + //box-shadow: 0 2px 5px black; -.app-well-app.app-folder:checked, .app-folder.grid-search-result:checked { - background: black; } + &:checked { background: black; } +} .app-folder-dialog { background: black; - box-shadow: 0 0 20px #030303; } - .app-folder-dialog .folder-name-container .edit-folder-button, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:active { - background: white; - color: black; } + box-shadow: 0 0 20px lighten(black, 1%); -.app-folder-dialog-container { - width: 720px; } + & .folder-name-container { + & .edit-folder-button { + &, &:hover, &:active { + background: white; + color: black; + } + } + } +} + +.app-folder-dialog-container { width: 720px; } +*/ diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 52a70008..c6099d71 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2557,71 +2557,109 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.5); } /* OSD */ -.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel { +/* +$_osd_color: if($variant=='light', black, $fg_color); +%osd_panel { font-weight: bold; - background-color: #ffffff; - color: #5c616c; - border: 1px solid rgba(0, 0, 0, 0.15); - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } - .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher StIcon, .screenshot-ui-panel StIcon { - color: black; - icon-shadow: 0 0 6px rgba(0, 0, 0, 0.4); } + background-color: $bg_color; + color: $fg_color; + border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color); + box-shadow: 0 4px 10px transparentize(black, .8); -.osd-window .level { - -barlevel-background-color: rgba(0, 0, 0, 0.3); - -barlevel-active-background-color: black; } + StIcon { + color: $_osd_color; + icon-shadow: 0 0 6px transparentize(black, .6); + } +} + +.osd-window { + .level { + -barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9)); + -barlevel-active-background-color: $_osd_color; + } +} /* Slider */ +/* .slider { height: 1.1em; -barlevel-height: .35em; - -barlevel-background-color: #d9d9d9; - -barlevel-border-color: #2777ff; - -barlevel-active-background-color: #2777ff; - -barlevel-overdrive-color: #d41919; + -barlevel-background-color: $borders_color; + -barlevel-border-color: $selected_bg_color; + -barlevel-active-background-color: $selected_bg_color; + -barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-separator-width: 0.1em; -barlevel-border-width: 0; - -slider-handle-radius: 0; } + + -slider-handle-radius: 0; +} /* Check Boxes */ -.check-box StBin { - background-image: url("assets/checkbox-off.svg"); } +/* +.check-box { + StBin { + background-image: if($variant == 'light', url("assets/checkbox-off.svg"), + url("assets/checkbox-off-dark.svg")); + } -.check-box:focus StBin { - background-image: url("assets/checkbox-off-focused.svg"); } - -.check-box:checked StBin { - background-image: url("assets/checkbox.svg"); } - -.check-box:focus:checked StBin { - background-image: url("assets/checkbox-focused.svg"); } + &:focus StBin { background-image: if($variant == 'light', url("assets/checkbox-off-focused.svg"), + url("assets/checkbox-off-focused-dark.svg")); } + &:checked StBin { background-image: if($variant == 'light', url("assets/checkbox.svg"), + url("assets/checkbox-dark.svg")); } + &:focus:checked StBin { background-image: if($variant == 'light', url("assets/checkbox-focused.svg"), + url("assets/checkbox-focused-dark.svg")); } +} /* Switches */ +/* .toggle-switch { - background-image: url("assets/toggle-off.svg"); } - .toggle-switch:checked { - background-image: url("assets/toggle-on.svg"); } + background-image: if($variant == 'light', url("assets/toggle-off.svg"), + url("assets/toggle-off-dark.svg")); + &:checked { + background-image: if($variant == 'light', url("assets/toggle-on.svg"), + url("assets/toggle-on-dark.svg")); + } +} -.popup-menu-item.selected, .popup-menu-item:active { - background-color: #eaebec; - color: #5c616c; } +// menu items +.popup-menu-item { + &.selected, &:active { + background-color: $popover_hover_color; + color: $fg_color; + } +} /* App Switcher */ -.switcher-list .item-box:outlined { - padding: 6px; - border: 3px solid #2777ff; } +/* +// switcher onscreen panel +.switcher-list { + .item-box { + &:outlined { + padding: 6px; + border: 3px solid $selected_bg_color; + } -.switcher-list .item-box:selected { - background-color: #2777ff; - color: #ffffff; - text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } + &:selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + text-shadow: 0 1px 4px transparentize(black, 0.6); + } + } +} /* Workspace Switcher */ -.ws-switcher-box { - border: none; } +/* +.ws-switcher-box { border: none } -.workspace-switcher-container { - padding: 7px; } +.workspace-switcher-container { padding: 7px; } + +// active workspace in the switcher +.ws-switcher-active-up, +.ws-switcher-active-down, +.ws-switcher-active-left, +.ws-switcher-active-right { + //box-shadow: 0 0px 6px transparentize(black, .5); +} /* Window Picker */ .window-caption { @@ -2647,222 +2685,158 @@ StScrollBar { color: transparent; transition-duration: 0s; } -/* Tiled window previews */ -.tile-preview-left.on-primary, -.tile-preview-right.on-primary, -.tile-preview-left.tile-preview-right.on-primary { - border-radius: 0; } - /* TOP BAR */ +/* #panel { - background: rgba(255, 255, 255, 0.8); - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } - #panel .popup-menu-arrow { - width: 0; } - #panel StIcon { - icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } - #panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview { - background-color: transparent; } - #panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked { - color: white; } - #panel .panel-corner { - -panel-corner-radius: 0; } - #panel .panel-button { - color: black; } - #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked { - color: black; - box-shadow: inset 0 0 0 100px white; } - #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { - box-shadow: none; } - #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { - box-shadow: inset 0 0 0 100px white; } - #panel #panelActivities.panel-button { - margin-left: .4em; } - #panel #panelActivities.panel-button StLabel { - background-image: url("assets/view-grid-symbolic.svg"); + $_panel_bg: transparentize($bg_color, .2); + $_panel_fg: if($variant=='light', black, white); + $_panel_text_shadow: 0 1px 2px transparentize(black, 0.5); + background: $_panel_bg; + text-shadow: $_panel_text_shadow; + + .popup-menu-arrow { width: 0; } + + StIcon { icon-shadow: $_panel_text_shadow; } + + &.unlock-screen, + &.login-screen, + &.lock-screen, + &:overview { + background-color: transparent; + .panel-button { + &, &:hover, &:active, &:focus, &:overview, &:checked { color: white; } + } + } + + .panel-corner { -panel-corner-radius: 0; } + + .panel-button { + color: $_panel_fg; + &:active, &:focus, &:overview, &:checked { + color: $_panel_fg; + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2)); + } + } + + .panel-button.clock-display { + // Move highlight from .panel-button to .clock + &:active, &:overview, &:focus, &:checked { + box-shadow: none; + + .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2)); + } + } + } + + #panelActivities.panel-button { + margin-left: .4em; + StLabel { + background-image: if($variant == 'light', url("assets/view-grid-symbolic.svg"), + url("assets/view-grid-symbolic-dark.svg")); background-size: contain; width: 1.5em; height: 1.5em; - color: transparent; } - #panel #panelActivities.panel-button:overview StLabel { - background-image: url("assets/view-grid-symbolic-dark.svg"); } + color: transparent; + } + + &:overview StLabel { + background-image: url("assets/view-grid-symbolic-dark.svg"); + } + } +} /* Date/Time Menu */ -#calendarArea { - background-image: url("assets/kali-dragon.svg"); - background-size: contain; } +/* +@mixin notification_bubble($flat: false) { + border-width: 1px; + border-style: solid; + border-radius: $base_border_radius + 2px; + margin: $base_margin; -.events-section-title { - padding: 1em; } + @if $flat { + @include button(undecorated); + } @else { + @include button(normal); + } + + &:focus { + @include button(focus); + } + + &:hover { + @include button(hover); + box-shadow: none; + } + + &:active { + @include button(active); + } +} + +// overall menu +#calendarArea { + background-image: if($variant == 'light', url("assets/kali-dragon.svg"), + url("assets/kali-dragon-dark.svg")); + background-size: contain; +} + +.events-section-title { padding: 1em; } .datemenu-today-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - background-color: transparent; - background-color: none; } - .datemenu-today-button:insensitive { - color: rgba(92, 97, 108, 0.5); - background-color: rgba(92, 97, 108, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } - .datemenu-today-button:focus { - color: #5c616c; - background-color: #e2eaf9; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .datemenu-today-button:focus:hover { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .datemenu-today-button:focus:active { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .datemenu-today-button:hover { - color: #5c616c; - background-color: white; - box-shadow: none; } - .datemenu-today-button:active { - color: #5c616c; - background-color: white; } - .datemenu-today-button .date-label { + @include notification_bubble($flat: true); + + .date-label { font-size: 1.5em; - font-weight: 300; } + font-weight: 300; + } +} .calendar { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - background-color: transparent; - background-color: none; } - .calendar:insensitive { - color: rgba(92, 97, 108, 0.5); - background-color: rgba(92, 97, 108, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } - .calendar:focus { - color: #5c616c; - background-color: #e2eaf9; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .calendar:focus:hover { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .calendar:focus:active { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .calendar:hover { - color: #5c616c; - background-color: white; - box-shadow: none; } - .calendar:active { - color: #5c616c; - background-color: white; } - .calendar .pager-button:hover, .calendar .pager-button:focus { - background-color: #eaebec; } - .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus, .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { - color: #5c616c; - background-color: #eaebec; } - .calendar .calendar-today:hover, .calendar .calendar-today:focus { - background-color: #eaebec; - color: #5c616c; } - .calendar .calendar-today:active, .calendar .calendar-today:selected { - background: #2777ff; - color: #ffffff; } - .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { - background-color: #eaebec; - color: #5c616c; } + @include notification_bubble($flat: true); + + .pager-button { + &:hover, &:focus { background-color: $popover_hover_color } + } + + .calendar-day-base { + &:hover, &:focus, + &:active,&:selected { + color: $fg_color; + background-color: $popover_hover_color; + } + } + + .calendar-today { + &:hover,&:focus { + background-color: $popover_hover_color; + color: $fg_color; + } + &:active,&:selected { + background: $selected_bg_color; + color: $selected_fg_color; + &:hover,&:focus { + background-color: $popover_hover_color; + color: $fg_color; + } + } + } +} /* Events */ -.events-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - background-color: transparent; - background-color: none; } - .events-button:insensitive { - color: rgba(92, 97, 108, 0.5); - background-color: rgba(92, 97, 108, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } - .events-button:focus { - color: #5c616c; - background-color: #e2eaf9; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .events-button:focus:hover { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .events-button:focus:active { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .events-button:hover { - color: #5c616c; - background-color: white; - box-shadow: none; } - .events-button:active { - color: #5c616c; - background-color: white; } +/* +.events-button { @include notification_bubble($flat: true); } /* World clocks */ +/* .world-clocks-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - background-color: transparent; - background-color: none; } - .world-clocks-button:insensitive { - color: rgba(92, 97, 108, 0.5); - background-color: rgba(92, 97, 108, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } - .world-clocks-button:focus { - color: #5c616c; - background-color: #e2eaf9; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .world-clocks-button:focus:hover { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .world-clocks-button:focus:active { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .world-clocks-button:hover { - color: #5c616c; - background-color: white; - box-shadow: none; } - .world-clocks-button:active { - color: #5c616c; - background-color: white; } + @include notification_bubble($flat: true); +} .weather-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - background-color: transparent; - background-color: none; } - .weather-button:insensitive { - color: rgba(92, 97, 108, 0.5); - background-color: rgba(92, 97, 108, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } - .weather-button:focus { - color: #5c616c; - background-color: #e2eaf9; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .weather-button:focus:hover { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .weather-button:focus:active { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .weather-button:hover { - color: #5c616c; - background-color: white; - box-shadow: none; } - .weather-button:active { - color: #5c616c; - background-color: white; } + @include notification_bubble($flat: true); +} + /* Search */ .search-entry { @@ -2870,7 +2844,6 @@ StScrollBar { text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); font-weight: bold; background-color: rgba(255, 255, 255, 0.1); - border-radius: 999px; font-size: 1.1em; transition-duration: 200ms; } .search-entry StLabel.hint-text { @@ -2895,46 +2868,66 @@ StScrollBar { icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); } .search-section-content { - background-color: rgba(255, 255, 255, 0.1); - box-shadow: none; - border: none; } + background-color: rgba(255, 255, 255, 0.1); } .search-provider-icon .list-search-provider-content .list-search-provider-details { font-weight: bold; } /* DASHBOARD */ +/* #dash { - color: white; + color: $osd_fg_color; background-color: transparent; border: none; - border-color: transparent; } - #dash .overview-icon StIcon { + border-color: transparent; + + .overview-icon StIcon { color: white; - icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } + icon-shadow: 0 2px 6px transparentize(black, .6); + } +} .dash-background { - background: rgba(255, 255, 255, 0.1); } + background: $overview_transparent_bg; + //box-shadow: 0 2px 8px 0 transparentize(black, .2); +} -.dash-separator { - background: rgba(255, 255, 255, 0.1); } +.dash-separator { background: $overview_transparent_bg; } -.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { - background-color: rgba(255, 255, 255, 0.1); - color: black; } +.show-apps { + &:focus, + &:checked { + .overview-icon { + background-color: $overview_transparent_bg; + color: black; + } + } +} /* App Folders */ -.app-well-app.app-folder, .app-folder.grid-search-result, .app-well-app.app-folder .overview-icon.overview-icon-with-label, .app-folder.grid-search-result .overview-icon.overview-icon-with-label { - background-color: rgba(255, 255, 255, 0.1); } +/* +.app-well-app.app-folder { + &, & .overview-icon.overview-icon-with-label { + background-color: $overview_transparent_bg + } + //box-shadow: 0 2px 5px black; -.app-well-app.app-folder:checked, .app-folder.grid-search-result:checked { - background: black; } + &:checked { background: black; } +} .app-folder-dialog { background: black; - box-shadow: 0 0 20px #030303; } - .app-folder-dialog .folder-name-container .edit-folder-button, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:active { - background: white; - color: black; } + box-shadow: 0 0 20px lighten(black, 1%); -.app-folder-dialog-container { - width: 720px; } + & .folder-name-container { + & .edit-folder-button { + &, &:hover, &:active { + background: white; + color: black; + } + } + } +} + +.app-folder-dialog-container { width: 720px; } +*/ diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 0e30d94f..284854e6 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -2,6 +2,7 @@ $overview_transparent_bg: transparentize(white, .9); $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); /* OSD */ +/* $_osd_color: if($variant=='light', black, $fg_color); %osd_panel { font-weight: bold; @@ -24,7 +25,7 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* Slider */ - +/* .slider { height: 1.1em; -barlevel-height: .35em; @@ -39,7 +40,7 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* Check Boxes */ - +/* .check-box { StBin { background-image: if($variant == 'light', url("assets/checkbox-off.svg"), @@ -55,6 +56,7 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* Switches */ +/* .toggle-switch { background-image: if($variant == 'light', url("assets/toggle-off.svg"), url("assets/toggle-off-dark.svg")); @@ -73,6 +75,7 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* App Switcher */ +/* // switcher onscreen panel .switcher-list { .item-box { @@ -90,6 +93,7 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* Workspace Switcher */ +/* .ws-switcher-box { border: none } .workspace-switcher-container { padding: 7px; } @@ -135,13 +139,8 @@ $_osd_color: if($variant=='light', black, $fg_color); } } -/* Tiled window previews */ - -.tile-preview-left.on-primary, -.tile-preview-right.on-primary, -.tile-preview-left.tile-preview-right.on-primary{ border-radius: 0; } - /* TOP BAR */ +/* #panel { $_panel_bg: transparentize($bg_color, .2); $_panel_fg: if($variant=='light', black, white); @@ -203,6 +202,7 @@ $_osd_color: if($variant=='light', black, $fg_color); /* Date/Time Menu */ // notification styling +/* @mixin notification_bubble($flat: false) { border-width: 1px; border-style: solid; @@ -279,10 +279,11 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* Events */ +/* .events-button { @include notification_bubble($flat: true); } /* World clocks */ - +/* .world-clocks-button { @include notification_bubble($flat: true); } @@ -300,7 +301,6 @@ $_osd_color: if($variant=='light', black, $fg_color); text-shadow: 0px 1px 2px rgba(black, 0.9); font-weight: bold; background-color: $overview_transparent_bg; - border-radius: 999px; font-size: 1.1em; transition-duration: 200ms; @@ -334,11 +334,7 @@ $_osd_color: if($variant=='light', black, $fg_color); } // search results -.search-section-content { - background-color: $overview_transparent_bg; - box-shadow: none; - border: none; -} +.search-section-content { background-color: $overview_transparent_bg; } // search result provider .search-provider-icon { @@ -348,7 +344,7 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* DASHBOARD */ - +/* #dash { color: $osd_fg_color; background-color: transparent; @@ -379,6 +375,7 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* App Folders */ +/* .app-well-app.app-folder { &, & .overview-icon.overview-icon-with-label { background-color: $overview_transparent_bg @@ -403,3 +400,4 @@ $_osd_color: if($variant=='light', black, $fg_color); } .app-folder-dialog-container { width: 720px; } +*/ From 585d1f079abf71a2e9f35efdedb21366a43d1b42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Tue, 1 Mar 2022 19:39:56 +0100 Subject: [PATCH 05/34] Gnome-Shell: remove border to search results --- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 3 ++- share/themes/Kali-Light/gnome-shell/gnome-shell.css | 3 ++- src/themes/Kali/sass/gnome-shell/_common-tweaks.scss | 5 ++++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 0094865d..332b4b87 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2872,7 +2872,8 @@ $_osd_color: if($variant=='light', black, $fg_color); icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); } .search-section-content { - background-color: rgba(255, 255, 255, 0.1); } + background-color: rgba(255, 255, 255, 0.1); + border: none; } .search-provider-icon .list-search-provider-content .list-search-provider-details { font-weight: bold; } diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index c6099d71..b2ebc384 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2868,7 +2868,8 @@ $_osd_color: if($variant=='light', black, $fg_color); icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); } .search-section-content { - background-color: rgba(255, 255, 255, 0.1); } + background-color: rgba(255, 255, 255, 0.1); + border: none; } .search-provider-icon .list-search-provider-content .list-search-provider-details { font-weight: bold; } diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 284854e6..34678296 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -334,7 +334,10 @@ $_osd_color: if($variant=='light', black, $fg_color); } // search results -.search-section-content { background-color: $overview_transparent_bg; } +.search-section-content { + background-color: $overview_transparent_bg; + border: none; +} // search result provider .search-provider-icon { From bffccb82cc724593418e15034838b55f12eefe27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Tue, 1 Mar 2022 22:28:05 +0100 Subject: [PATCH 06/34] Gnome-Shell: update slider theme tweaks --- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 14 ++------------ .../themes/Kali-Light/gnome-shell/gnome-shell.css | 14 ++------------ .../Kali/sass/gnome-shell/_common-tweaks.scss | 9 --------- 3 files changed, 4 insertions(+), 33 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 332b4b87..7b610ede 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2584,19 +2584,9 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* Slider */ -/* .slider { - height: 1.1em; - -barlevel-height: .35em; - -barlevel-background-color: $borders_color; - -barlevel-border-color: $selected_bg_color; - -barlevel-active-background-color: $selected_bg_color; - -barlevel-overdrive-color: $destructive_color; - -barlevel-overdrive-separator-width: 0.1em; - -barlevel-border-width: 0; - - -slider-handle-radius: 0; -} + -barlevel-background-color: #0d0e11; + -slider-handle-radius: 0; } /* Check Boxes */ /* diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index b2ebc384..ab6a3d81 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2580,19 +2580,9 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* Slider */ -/* .slider { - height: 1.1em; - -barlevel-height: .35em; - -barlevel-background-color: $borders_color; - -barlevel-border-color: $selected_bg_color; - -barlevel-active-background-color: $selected_bg_color; - -barlevel-overdrive-color: $destructive_color; - -barlevel-overdrive-separator-width: 0.1em; - -barlevel-border-width: 0; - - -slider-handle-radius: 0; -} + -barlevel-background-color: #d9d9d9; + -slider-handle-radius: 0; } /* Check Boxes */ /* diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 34678296..cd6f479f 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -25,17 +25,8 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* Slider */ -/* .slider { - height: 1.1em; - -barlevel-height: .35em; -barlevel-background-color: $borders_color; - -barlevel-border-color: $selected_bg_color; - -barlevel-active-background-color: $selected_bg_color; - -barlevel-overdrive-color: $destructive_color; - -barlevel-overdrive-separator-width: 0.1em; - -barlevel-border-width: 0; - -slider-handle-radius: 0; } From dbd71be448229fa3957849ab99c0ec1cd21d6163 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Tue, 1 Mar 2022 22:44:15 +0100 Subject: [PATCH 07/34] Gnome-Shell: remove workspaces-switcher theme tweaks --- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 14 -------------- .../themes/Kali-Light/gnome-shell/gnome-shell.css | 14 -------------- .../Kali/sass/gnome-shell/_common-tweaks.scss | 14 -------------- 3 files changed, 42 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 7b610ede..c7cdc520 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2641,20 +2641,6 @@ $_osd_color: if($variant=='light', black, $fg_color); } } -/* Workspace Switcher */ -/* -.ws-switcher-box { border: none } - -.workspace-switcher-container { padding: 7px; } - -// active workspace in the switcher -.ws-switcher-active-up, -.ws-switcher-active-down, -.ws-switcher-active-left, -.ws-switcher-active-right { - //box-shadow: 0 0px 6px transparentize(black, .5); -} - /* Window Picker */ .window-caption { color: black; diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index ab6a3d81..618d1671 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2637,20 +2637,6 @@ $_osd_color: if($variant=='light', black, $fg_color); } } -/* Workspace Switcher */ -/* -.ws-switcher-box { border: none } - -.workspace-switcher-container { padding: 7px; } - -// active workspace in the switcher -.ws-switcher-active-up, -.ws-switcher-active-down, -.ws-switcher-active-left, -.ws-switcher-active-right { - //box-shadow: 0 0px 6px transparentize(black, .5); -} - /* Window Picker */ .window-caption { color: black; diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index cd6f479f..b4a74426 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -83,20 +83,6 @@ $_osd_color: if($variant=='light', black, $fg_color); } } -/* Workspace Switcher */ -/* -.ws-switcher-box { border: none } - -.workspace-switcher-container { padding: 7px; } - -// active workspace in the switcher -.ws-switcher-active-up, -.ws-switcher-active-down, -.ws-switcher-active-left, -.ws-switcher-active-right { - //box-shadow: 0 0px 6px transparentize(black, .5); -} - /* Window Picker */ // Window titles From 52dda0cd78cb76ae16b46a00b3fab7ca7073a295 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 2 Mar 2022 10:47:44 +0100 Subject: [PATCH 08/34] Gnome-Shell: update panel theme tweaks --- .../Kali-Dark/gnome-shell/gnome-shell.css | 79 ++++++------------- .../Kali-Light/gnome-shell/gnome-shell.css | 79 ++++++------------- .../Kali/sass/gnome-shell/_common-tweaks.scss | 9 +-- 3 files changed, 50 insertions(+), 117 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index c7cdc520..549337b8 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2666,65 +2666,34 @@ $_osd_color: if($variant=='light', black, $fg_color); transition-duration: 0s; } /* TOP BAR */ -/* #panel { - $_panel_bg: transparentize($bg_color, .2); - $_panel_fg: if($variant=='light', black, white); - $_panel_text_shadow: 0 1px 2px transparentize(black, 0.5); - background: $_panel_bg; - text-shadow: $_panel_text_shadow; - - .popup-menu-arrow { width: 0; } - - StIcon { icon-shadow: $_panel_text_shadow; } - - &.unlock-screen, - &.login-screen, - &.lock-screen, - &:overview { - background-color: transparent; - .panel-button { - &, &:hover, &:active, &:focus, &:overview, &:checked { color: white; } - } - } - - .panel-corner { -panel-corner-radius: 0; } - - .panel-button { - color: $_panel_fg; - &:active, &:focus, &:overview, &:checked { - color: $_panel_fg; - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2)); - } - } - - .panel-button.clock-display { - // Move highlight from .panel-button to .clock - &:active, &:overview, &:focus, &:checked { - box-shadow: none; - - .clock { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2)); - } - } - } - - #panelActivities.panel-button { - margin-left: .4em; - StLabel { - background-image: if($variant == 'light', url("assets/view-grid-symbolic.svg"), - url("assets/view-grid-symbolic-dark.svg")); + background: rgba(35, 37, 46, 0.8); + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } + #panel StIcon { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } + #panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview { + background-color: transparent; } + #panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked { + color: white; } + #panel .panel-button { + color: white; } + #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked { + color: white; + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel .panel-button.clock-display:hover, #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { + box-shadow: none; } + #panel .panel-button.clock-display:hover .clock, #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel #panelActivities.panel-button { + margin-left: .4em; } + #panel #panelActivities.panel-button StLabel { + background-image: url("assets/view-grid-symbolic-dark.svg"); background-size: contain; width: 1.5em; height: 1.5em; - color: transparent; - } - - &:overview StLabel { - background-image: url("assets/view-grid-symbolic-dark.svg"); - } - } -} + color: transparent; } + #panel #panelActivities.panel-button:overview StLabel { + background-image: url("assets/view-grid-symbolic-dark.svg"); } /* Date/Time Menu */ /* diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 618d1671..0cfcce5e 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2662,65 +2662,34 @@ $_osd_color: if($variant=='light', black, $fg_color); transition-duration: 0s; } /* TOP BAR */ -/* #panel { - $_panel_bg: transparentize($bg_color, .2); - $_panel_fg: if($variant=='light', black, white); - $_panel_text_shadow: 0 1px 2px transparentize(black, 0.5); - background: $_panel_bg; - text-shadow: $_panel_text_shadow; - - .popup-menu-arrow { width: 0; } - - StIcon { icon-shadow: $_panel_text_shadow; } - - &.unlock-screen, - &.login-screen, - &.lock-screen, - &:overview { - background-color: transparent; - .panel-button { - &, &:hover, &:active, &:focus, &:overview, &:checked { color: white; } - } - } - - .panel-corner { -panel-corner-radius: 0; } - - .panel-button { - color: $_panel_fg; - &:active, &:focus, &:overview, &:checked { - color: $_panel_fg; - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2)); - } - } - - .panel-button.clock-display { - // Move highlight from .panel-button to .clock - &:active, &:overview, &:focus, &:checked { - box-shadow: none; - - .clock { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2)); - } - } - } - - #panelActivities.panel-button { - margin-left: .4em; - StLabel { - background-image: if($variant == 'light', url("assets/view-grid-symbolic.svg"), - url("assets/view-grid-symbolic-dark.svg")); + background: rgba(255, 255, 255, 0.8); + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } + #panel StIcon { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } + #panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview { + background-color: transparent; } + #panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked { + color: white; } + #panel .panel-button { + color: black; } + #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked { + color: black; + box-shadow: inset 0 0 0 100px white; } + #panel .panel-button.clock-display:hover, #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { + box-shadow: none; } + #panel .panel-button.clock-display:hover .clock, #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { + box-shadow: inset 0 0 0 100px white; } + #panel #panelActivities.panel-button { + margin-left: .4em; } + #panel #panelActivities.panel-button StLabel { + background-image: url("assets/view-grid-symbolic.svg"); background-size: contain; width: 1.5em; height: 1.5em; - color: transparent; - } - - &:overview StLabel { - background-image: url("assets/view-grid-symbolic-dark.svg"); - } - } -} + color: transparent; } + #panel #panelActivities.panel-button:overview StLabel { + background-image: url("assets/view-grid-symbolic-dark.svg"); } /* Date/Time Menu */ /* diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index b4a74426..ef2be962 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -117,7 +117,6 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* TOP BAR */ -/* #panel { $_panel_bg: transparentize($bg_color, .2); $_panel_fg: if($variant=='light', black, white); @@ -125,8 +124,6 @@ $_osd_color: if($variant=='light', black, $fg_color); background: $_panel_bg; text-shadow: $_panel_text_shadow; - .popup-menu-arrow { width: 0; } - StIcon { icon-shadow: $_panel_text_shadow; } &.unlock-screen, @@ -139,11 +136,9 @@ $_osd_color: if($variant=='light', black, $fg_color); } } - .panel-corner { -panel-corner-radius: 0; } - .panel-button { color: $_panel_fg; - &:active, &:focus, &:overview, &:checked { + &:hover, &:active, &:focus, &:overview, &:checked { color: $_panel_fg; box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2)); } @@ -151,7 +146,7 @@ $_osd_color: if($variant=='light', black, $fg_color); .panel-button.clock-display { // Move highlight from .panel-button to .clock - &:active, &:overview, &:focus, &:checked { + &:hover, &:active, &:overview, &:focus, &:checked { box-shadow: none; .clock { From dcf4b457682bf4e47a0c3efe2d3722758a0025f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 2 Mar 2022 12:01:59 +0100 Subject: [PATCH 09/34] Gnome-Shell: update app-grid theme tweaks --- .../Kali-Dark/gnome-shell/gnome-shell.css | 28 +++---------------- .../Kali-Light/gnome-shell/gnome-shell.css | 28 +++---------------- .../Kali/sass/gnome-shell/_common-tweaks.scss | 25 ++--------------- 3 files changed, 11 insertions(+), 70 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 549337b8..6ae3c2c1 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2854,30 +2854,10 @@ $_osd_color: if($variant=='light', black, $fg_color); } } -/* App Folders */ -/* -.app-well-app.app-folder { - &, & .overview-icon.overview-icon-with-label { - background-color: $overview_transparent_bg - } - //box-shadow: 0 2px 5px black; - - &:checked { background: black; } -} +/* App Grid */ +.app-well-app, .grid-search-result { + color: white; } .app-folder-dialog { background: black; - box-shadow: 0 0 20px lighten(black, 1%); - - & .folder-name-container { - & .edit-folder-button { - &, &:hover, &:active { - background: white; - color: black; - } - } - } -} - -.app-folder-dialog-container { width: 720px; } -*/ + box-shadow: 0 0 20px #030303; } diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 0cfcce5e..7905a084 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2850,30 +2850,10 @@ $_osd_color: if($variant=='light', black, $fg_color); } } -/* App Folders */ -/* -.app-well-app.app-folder { - &, & .overview-icon.overview-icon-with-label { - background-color: $overview_transparent_bg - } - //box-shadow: 0 2px 5px black; - - &:checked { background: black; } -} +/* App Grid */ +.app-well-app, .grid-search-result { + color: white; } .app-folder-dialog { background: black; - box-shadow: 0 0 20px lighten(black, 1%); - - & .folder-name-container { - & .edit-folder-button { - &, &:hover, &:active { - background: white; - color: black; - } - } - } -} - -.app-folder-dialog-container { width: 720px; } -*/ + box-shadow: 0 0 20px #030303; } diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index ef2be962..5b4b1cf2 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -349,30 +349,11 @@ $_osd_color: if($variant=='light', black, $fg_color); } } -/* App Folders */ -/* -.app-well-app.app-folder { - &, & .overview-icon.overview-icon-with-label { - background-color: $overview_transparent_bg - } - //box-shadow: 0 2px 5px black; - - &:checked { background: black; } -} +/* App Grid */ +// Icon tiles in the app grid +.app-well-app { color: white; } .app-folder-dialog { background: black; box-shadow: 0 0 20px lighten(black, 1%); - - & .folder-name-container { - & .edit-folder-button { - &, &:hover, &:active { - background: white; - color: black; - } - } - } } - -.app-folder-dialog-container { width: 720px; } -*/ From 080a8be821fc7ae3c2fab88851e42c7d8d28d560 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 2 Mar 2022 12:27:17 +0100 Subject: [PATCH 10/34] Gnome-Shell: update dash theme tweaks --- .../Kali-Dark/gnome-shell/gnome-shell.css | 31 +++---------------- .../Kali-Light/gnome-shell/gnome-shell.css | 31 +++---------------- .../Kali/sass/gnome-shell/_common-tweaks.scss | 27 ++-------------- 3 files changed, 10 insertions(+), 79 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 6ae3c2c1..da7b4d6b 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2824,35 +2824,12 @@ $_osd_color: if($variant=='light', black, $fg_color); font-weight: bold; } /* DASHBOARD */ -/* #dash { - color: $osd_fg_color; - background-color: transparent; - border: none; - border-color: transparent; + color: white; + icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } - .overview-icon StIcon { - color: white; - icon-shadow: 0 2px 6px transparentize(black, .6); - } -} - -.dash-background { - background: $overview_transparent_bg; - //box-shadow: 0 2px 8px 0 transparentize(black, .2); -} - -.dash-separator { background: $overview_transparent_bg; } - -.show-apps { - &:focus, - &:checked { - .overview-icon { - background-color: $overview_transparent_bg; - color: black; - } - } -} +.dash-background, .dash-separator { + background: rgba(255, 255, 255, 0.1); } /* App Grid */ .app-well-app, .grid-search-result { diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 7905a084..4b58acac 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2820,35 +2820,12 @@ $_osd_color: if($variant=='light', black, $fg_color); font-weight: bold; } /* DASHBOARD */ -/* #dash { - color: $osd_fg_color; - background-color: transparent; - border: none; - border-color: transparent; + color: white; + icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } - .overview-icon StIcon { - color: white; - icon-shadow: 0 2px 6px transparentize(black, .6); - } -} - -.dash-background { - background: $overview_transparent_bg; - //box-shadow: 0 2px 8px 0 transparentize(black, .2); -} - -.dash-separator { background: $overview_transparent_bg; } - -.show-apps { - &:focus, - &:checked { - .overview-icon { - background-color: $overview_transparent_bg; - color: black; - } - } -} +.dash-background, .dash-separator { + background: rgba(255, 255, 255, 0.1); } /* App Grid */ .app-well-app, .grid-search-result { diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 5b4b1cf2..9310f0c9 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -319,35 +319,12 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* DASHBOARD */ -/* #dash { color: $osd_fg_color; - background-color: transparent; - border: none; - border-color: transparent; - - .overview-icon StIcon { - color: white; - icon-shadow: 0 2px 6px transparentize(black, .6); - } + icon-shadow: 0 2px 6px transparentize(black, .6); } -.dash-background { - background: $overview_transparent_bg; - //box-shadow: 0 2px 8px 0 transparentize(black, .2); -} - -.dash-separator { background: $overview_transparent_bg; } - -.show-apps { - &:focus, - &:checked { - .overview-icon { - background-color: $overview_transparent_bg; - color: black; - } - } -} +.dash-background, .dash-separator { background: $overview_transparent_bg; } /* App Grid */ // Icon tiles in the app grid From 04bb75e6c0d06f161da017af7eb3b919bb2bebb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 2 Mar 2022 12:47:47 +0100 Subject: [PATCH 11/34] Gnome-Shell: set recording indicator text color to white --- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 2 ++ share/themes/Kali-Light/gnome-shell/gnome-shell.css | 2 ++ src/themes/Kali/sass/gnome-shell/_common-tweaks.scss | 1 + 3 files changed, 5 insertions(+) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index da7b4d6b..99228ad6 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2680,6 +2680,8 @@ $_osd_color: if($variant=='light', black, $fg_color); #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked { color: white; box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel .panel-button.screen-recording-indicator { + color: white; } #panel .panel-button.clock-display:hover, #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { box-shadow: none; } #panel .panel-button.clock-display:hover .clock, #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 4b58acac..3eeeaee2 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2676,6 +2676,8 @@ $_osd_color: if($variant=='light', black, $fg_color); #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked { color: black; box-shadow: inset 0 0 0 100px white; } + #panel .panel-button.screen-recording-indicator { + color: white; } #panel .panel-button.clock-display:hover, #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { box-shadow: none; } #panel .panel-button.clock-display:hover .clock, #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 9310f0c9..f340d71a 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -142,6 +142,7 @@ $_osd_color: if($variant=='light', black, $fg_color); color: $_panel_fg; box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2)); } + &.screen-recording-indicator { color: white; } } .panel-button.clock-display { From 58cfa4b066fb97fc0e336f79d49addfd437f366f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 2 Mar 2022 13:45:05 +0100 Subject: [PATCH 12/34] Gnome-Shell: update keyboard theme tweaks --- .../Kali-Dark/gnome-shell/gnome-shell.css | 36 +++++++++---------- .../Kali-Light/gnome-shell/gnome-shell.css | 36 +++++++++---------- .../gnome-shell-sass/widgets/_keyboard.scss | 6 ++-- .../widgets/_keyboard.scss.patch | 12 +++++++ 4 files changed, 51 insertions(+), 39 deletions(-) create mode 100644 src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss.patch diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 99228ad6..4bfbfa2c 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -1984,7 +1984,7 @@ StScrollBar { /* On-screen Keyboard */ #keyboard { - background-color: #303340; + background-color: rgba(26, 28, 35, 0.96); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); } #keyboard .page-indicator { padding: 6px; } @@ -2006,7 +2006,7 @@ StScrollBar { border-radius: 12px; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3); color: white; - background-color: #545454; } + background-color: #363a48; } .keyboard-key:focus { color: white; background-color: #35415b; @@ -2019,30 +2019,30 @@ StScrollBar { box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .keyboard-key:hover { color: white; - background-color: #5e5e5e; } + background-color: #3f4454; } .keyboard-key:active { color: white; - background-color: #666666; } + background-color: #464b5d; } .keyboard-key:checked { color: white; - background-color: #737373; } + background-color: #51576b; } .keyboard-key:grayed { background-color: #1c1e25; color: white; border-color: black; } .keyboard-key.default-key { color: white; - background-color: #3b3b3b; + background-color: #4c5266; border-radius: 12px; } .keyboard-key.default-key:hover { color: white; - background-color: #454545; } + background-color: #555b71; } .keyboard-key.default-key:active { color: white; - background-color: #4d4d4d; } + background-color: #5b627a; } .keyboard-key.default-key:checked { color: white; - background-color: #595959; } + background-color: #666e89; } .keyboard-key.enter-key { color: #ffffff; background-color: #3681ff; @@ -2058,10 +2058,10 @@ StScrollBar { color: #ffffff; background-color: #74a7ff; } .keyboard-key.shift-key-uppercase { - background-color: gray; + background-color: #5b627a; color: #303340; } .keyboard-key.shift-key-uppercase:hover { - background-color: #8c8c8c; + background-color: #666e89; color: #3b3f4e; } .keyboard-key StIcon { icon-size: 24px; } @@ -2077,7 +2077,7 @@ StScrollBar { padding: 6px; } .keyboard-subkeys .keyboard-key { color: white; - background-color: #545454; + background-color: #363a48; border-radius: 12px; } .keyboard-subkeys .keyboard-key:focus { color: white; @@ -2091,13 +2091,13 @@ StScrollBar { box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .keyboard-subkeys .keyboard-key:hover { color: white; - background-color: #5e5e5e; } + background-color: #3f4454; } .keyboard-subkeys .keyboard-key:active { color: white; - background-color: #666666; } + background-color: #464b5d; } .keyboard-subkeys .keyboard-key:checked { color: white; - background-color: #737373; } + background-color: #51576b; } .emoji-page .keyboard-key { background-color: transparent; @@ -2133,13 +2133,13 @@ StScrollBar { box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .word-suggestions StButton:hover { color: white; - background-color: #5e5e5e; } + background-color: #3f4454; } .word-suggestions StButton:active { color: white; - background-color: #666666; } + background-color: #464b5d; } .word-suggestions StButton:checked { color: white; - background-color: #737373; } + background-color: #51576b; } /* Looking Glass */ #LookingGlassDialog { diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 3eeeaee2..d0390f3e 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -1984,7 +1984,7 @@ StScrollBar { /* On-screen Keyboard */ #keyboard { - background-color: #303340; + background-color: rgba(26, 28, 35, 0.96); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); } #keyboard .page-indicator { padding: 6px; } @@ -2006,7 +2006,7 @@ StScrollBar { border-radius: 12px; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); color: white; - background-color: #545454; } + background-color: #363a48; } .keyboard-key:focus { color: white; background-color: #35415b; @@ -2019,30 +2019,30 @@ StScrollBar { box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .keyboard-key:hover { color: white; - background-color: #5e5e5e; } + background-color: #3f4454; } .keyboard-key:active { color: white; - background-color: #666666; } + background-color: #464b5d; } .keyboard-key:checked { color: white; - background-color: #737373; } + background-color: #51576b; } .keyboard-key:grayed { background-color: #f7f7f7; color: white; border-color: black; } .keyboard-key.default-key { color: white; - background-color: #383838; + background-color: #4c5266; border-radius: 12px; } .keyboard-key.default-key:hover { color: white; - background-color: #424242; } + background-color: #555b71; } .keyboard-key.default-key:active { color: white; - background-color: #4a4a4a; } + background-color: #5b627a; } .keyboard-key.default-key:checked { color: white; - background-color: #575757; } + background-color: #666e89; } .keyboard-key.enter-key { color: #ffffff; background-color: #3681ff; @@ -2058,10 +2058,10 @@ StScrollBar { color: #ffffff; background-color: #74a7ff; } .keyboard-key.shift-key-uppercase { - background-color: gray; + background-color: #5b627a; color: #303340; } .keyboard-key.shift-key-uppercase:hover { - background-color: #8c8c8c; + background-color: #666e89; color: #3b3f4e; } .keyboard-key StIcon { icon-size: 24px; } @@ -2077,7 +2077,7 @@ StScrollBar { padding: 6px; } .keyboard-subkeys .keyboard-key { color: white; - background-color: #545454; + background-color: #363a48; border-radius: 12px; } .keyboard-subkeys .keyboard-key:focus { color: white; @@ -2091,13 +2091,13 @@ StScrollBar { box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .keyboard-subkeys .keyboard-key:hover { color: white; - background-color: #5e5e5e; } + background-color: #3f4454; } .keyboard-subkeys .keyboard-key:active { color: white; - background-color: #666666; } + background-color: #464b5d; } .keyboard-subkeys .keyboard-key:checked { color: white; - background-color: #737373; } + background-color: #51576b; } .emoji-page .keyboard-key { background-color: transparent; @@ -2133,13 +2133,13 @@ StScrollBar { box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .word-suggestions StButton:hover { color: white; - background-color: #5e5e5e; } + background-color: #3f4454; } .word-suggestions StButton:active { color: white; - background-color: #666666; } + background-color: #464b5d; } .word-suggestions StButton:checked { color: white; - background-color: #737373; } + background-color: #51576b; } /* Looking Glass */ #LookingGlassDialog { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss index 91d9a3d5..ca049c68 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss @@ -2,15 +2,15 @@ $key_size: 1.2em; $key_border_radius: $base_border_radius + 4px; // 12px -$key_bg_color: darken($osd_fg_color, 70%); +$key_bg_color: $osd_bg_color; // $default_key_bg_color: darken($key_bg_color, 4%); -$default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%)); +$default_key_bg_color: lighten($osd_bg_color, 10%); // draw keys using button function #keyboard { // background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1); - background-color: $osd_bg_color; + background-color: transparentize(darken($osd_bg_color, 10%), 0.04); box-shadow: inset 0 1px 0 0 $osd_outer_borders_color; .page-indicator { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss.patch b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss.patch new file mode 100644 index 00000000..6a21d8a7 --- /dev/null +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss.patch @@ -0,0 +1,12 @@ +5c5 +< $key_bg_color: darken($osd_fg_color, 70%); +--- +> $key_bg_color: $osd_bg_color; +7c7 +< $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%)); +--- +> $default_key_bg_color: lighten($osd_bg_color, 10%); +13c13 +< background-color: $osd_bg_color; +--- +> background-color: transparentize(darken($osd_bg_color, 10%), 0.04); From 55f1e71782ca463e3995493250be1f89b500ac9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 2 Mar 2022 13:51:31 +0100 Subject: [PATCH 13/34] Gnome-Shell: remove slider barlevel border --- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 1 + share/themes/Kali-Light/gnome-shell/gnome-shell.css | 1 + src/themes/Kali/sass/gnome-shell/_common-tweaks.scss | 1 + 3 files changed, 3 insertions(+) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 4bfbfa2c..6262ddfc 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2586,6 +2586,7 @@ $_osd_color: if($variant=='light', black, $fg_color); /* Slider */ .slider { -barlevel-background-color: #0d0e11; + -barlevel-border-width: 0; -slider-handle-radius: 0; } /* Check Boxes */ diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index d0390f3e..5538fde8 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2582,6 +2582,7 @@ $_osd_color: if($variant=='light', black, $fg_color); /* Slider */ .slider { -barlevel-background-color: #d9d9d9; + -barlevel-border-width: 0; -slider-handle-radius: 0; } /* Check Boxes */ diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index f340d71a..00dd5ca6 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -27,6 +27,7 @@ $_osd_color: if($variant=='light', black, $fg_color); /* Slider */ .slider { -barlevel-background-color: $borders_color; + -barlevel-border-width: 0; -slider-handle-radius: 0; } From 7e368dd4d5525117166fc5e1e543b9b4c544616a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 2 Mar 2022 17:07:31 +0100 Subject: [PATCH 14/34] Gnome-Shell: update calendar theme tweaks --- .../Kali-Dark/gnome-shell/gnome-shell.css | 131 +++++------------- .../Kali-Light/gnome-shell/gnome-shell.css | 131 +++++------------- .../Kali/sass/gnome-shell/_common-tweaks.scss | 94 +------------ .../upstream/gnome-shell-sass/_drawing.scss | 2 +- .../gnome-shell-sass/_drawing.scss.patch | 4 + 5 files changed, 75 insertions(+), 287 deletions(-) create mode 100644 src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 6262ddfc..fb67c026 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -134,16 +134,14 @@ stage { .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } + background-color: transparent; } .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { background-color: transparent; background-color: none; } .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive { color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } + background-color: transparent; } .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { color: #eeeeec; background-color: #37435a; @@ -488,8 +486,7 @@ StScrollBar { .datemenu-today-button:insensitive { color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } + background-color: transparent; } .datemenu-today-button:focus { color: #eeeeec; background-color: #2c364c; @@ -519,8 +516,7 @@ StScrollBar { .calendar:insensitive { color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } + background-color: transparent; } .calendar:focus { color: #eeeeec; background-color: #2c364c; @@ -1810,8 +1806,7 @@ StScrollBar { .app-folder-dialog .folder-name-container .edit-folder-button:insensitive { color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } + background-color: transparent; } .app-folder-dialog .folder-name-container .edit-folder-button:focus { color: #eeeeec; background-color: #2c364c; @@ -2699,96 +2694,34 @@ $_osd_color: if($variant=='light', black, $fg_color); background-image: url("assets/view-grid-symbolic-dark.svg"); } /* Date/Time Menu */ -/* -@mixin notification_bubble($flat: false) { - border-width: 1px; - border-style: solid; - border-radius: $base_border_radius + 2px; - margin: $base_margin; - - @if $flat { - @include button(undecorated); - } @else { - @include button(normal); - } - - &:focus { - @include button(focus); - } - - &:hover { - @include button(hover); - box-shadow: none; - } - - &:active { - @include button(active); - } -} - -// overall menu -#calendarArea { - background-image: if($variant == 'light', url("assets/kali-dragon.svg"), - url("assets/kali-dragon-dark.svg")); - background-size: contain; -} - -.events-section-title { padding: 1em; } - .datemenu-today-button { - @include notification_bubble($flat: true); - - .date-label { - font-size: 1.5em; - font-weight: 300; - } -} - -.calendar { - @include notification_bubble($flat: true); - - .pager-button { - &:hover, &:focus { background-color: $popover_hover_color } - } - - .calendar-day-base { - &:hover, &:focus, - &:active,&:selected { - color: $fg_color; - background-color: $popover_hover_color; - } - } - - .calendar-today { - &:hover,&:focus { - background-color: $popover_hover_color; - color: $fg_color; - } - &:active,&:selected { - background: $selected_bg_color; - color: $selected_fg_color; - &:hover,&:focus { - background-color: $popover_hover_color; - color: $fg_color; - } - } - } -} - -/* Events */ -/* -.events-button { @include notification_bubble($flat: true); } - -/* World clocks */ -/* -.world-clocks-button { - @include notification_bubble($flat: true); -} - -.weather-button { - @include notification_bubble($flat: true); -} - + border-radius: 8px; + margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + color: #eeeeec; + background-color: #2d2f38; } + .datemenu-today-button:focus { + color: #eeeeec; + background-color: #2c364c; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .datemenu-today-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .datemenu-today-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .datemenu-today-button:hover { + color: #eeeeec; + background-color: #343640; } + .datemenu-today-button:active { + color: #eeeeec; + background-color: #3b3d49; } + .datemenu-today-button:insensitive { + color: inherit; } + .datemenu-today-button .day-label { + font-weight: normal; } + .datemenu-today-button .date-label { + font-weight: lighter; } /* Search */ .search-entry { diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 5538fde8..dfff1d8f 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -134,16 +134,14 @@ stage { .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } + background-color: transparent; } .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { background-color: transparent; background-color: none; } .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive { color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } + background-color: transparent; } .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { color: #5c616c; background-color: #313d55; @@ -488,8 +486,7 @@ StScrollBar { .datemenu-today-button:insensitive { color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } + background-color: transparent; } .datemenu-today-button:focus { color: #5c616c; background-color: #e2eaf9; @@ -519,8 +516,7 @@ StScrollBar { .calendar:insensitive { color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } + background-color: transparent; } .calendar:focus { color: #5c616c; background-color: #e2eaf9; @@ -1810,8 +1806,7 @@ StScrollBar { .app-folder-dialog .folder-name-container .edit-folder-button:insensitive { color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); - background-color: transparent; - color: rgba(255, 255, 255, 0.5); } + background-color: transparent; } .app-folder-dialog .folder-name-container .edit-folder-button:focus { color: #5c616c; background-color: #e2eaf9; @@ -2695,96 +2690,34 @@ $_osd_color: if($variant=='light', black, $fg_color); background-image: url("assets/view-grid-symbolic-dark.svg"); } /* Date/Time Menu */ -/* -@mixin notification_bubble($flat: false) { - border-width: 1px; - border-style: solid; - border-radius: $base_border_radius + 2px; - margin: $base_margin; - - @if $flat { - @include button(undecorated); - } @else { - @include button(normal); - } - - &:focus { - @include button(focus); - } - - &:hover { - @include button(hover); - box-shadow: none; - } - - &:active { - @include button(active); - } -} - -// overall menu -#calendarArea { - background-image: if($variant == 'light', url("assets/kali-dragon.svg"), - url("assets/kali-dragon-dark.svg")); - background-size: contain; -} - -.events-section-title { padding: 1em; } - .datemenu-today-button { - @include notification_bubble($flat: true); - - .date-label { - font-size: 1.5em; - font-weight: 300; - } -} - -.calendar { - @include notification_bubble($flat: true); - - .pager-button { - &:hover, &:focus { background-color: $popover_hover_color } - } - - .calendar-day-base { - &:hover, &:focus, - &:active,&:selected { - color: $fg_color; - background-color: $popover_hover_color; - } - } - - .calendar-today { - &:hover,&:focus { - background-color: $popover_hover_color; - color: $fg_color; - } - &:active,&:selected { - background: $selected_bg_color; - color: $selected_fg_color; - &:hover,&:focus { - background-color: $popover_hover_color; - color: $fg_color; - } - } - } -} - -/* Events */ -/* -.events-button { @include notification_bubble($flat: true); } - -/* World clocks */ -/* -.world-clocks-button { - @include notification_bubble($flat: true); -} - -.weather-button { - @include notification_bubble($flat: true); -} - + border-radius: 8px; + margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + color: #5c616c; + background-color: #f7f7f8; } + .datemenu-today-button:focus { + color: #5c616c; + background-color: #e2eaf9; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .datemenu-today-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .datemenu-today-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .datemenu-today-button:hover { + color: #5c616c; + background-color: white; } + .datemenu-today-button:active { + color: #5c616c; + background-color: white; } + .datemenu-today-button:insensitive { + color: inherit; } + .datemenu-today-button .day-label { + font-weight: normal; } + .datemenu-today-button .date-label { + font-weight: lighter; } /* Search */ .search-entry { diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 00dd5ca6..36e7409d 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -175,98 +175,16 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* Date/Time Menu */ -// notification styling -/* -@mixin notification_bubble($flat: false) { - border-width: 1px; - border-style: solid; - border-radius: $base_border_radius + 2px; - margin: $base_margin; - - @if $flat { - @include button(undecorated); - } @else { - @include button(normal); - } - - &:focus { - @include button(focus); - } - - &:hover { - @include button(hover); - box-shadow: none; - } - - &:active { - @include button(active); - } -} - -// overall menu -#calendarArea { - background-image: if($variant == 'light', url("assets/kali-dragon.svg"), - url("assets/kali-dragon-dark.svg")); - background-size: contain; -} - -.events-section-title { padding: 1em; } - .datemenu-today-button { - @include notification_bubble($flat: true); + @include card($flat: false); - .date-label { - font-size: 1.5em; - font-weight: 300; - } + &:insensitive { color: inherit; } + + .day-label { font-weight: normal; } + + .date-label { font-weight: lighter; } } -.calendar { - @include notification_bubble($flat: true); - - .pager-button { - &:hover, &:focus { background-color: $popover_hover_color } - } - - .calendar-day-base { - &:hover, &:focus, - &:active,&:selected { - color: $fg_color; - background-color: $popover_hover_color; - } - } - - .calendar-today { - &:hover,&:focus { - background-color: $popover_hover_color; - color: $fg_color; - } - &:active,&:selected { - background: $selected_bg_color; - color: $selected_fg_color; - &:hover,&:focus { - background-color: $popover_hover_color; - color: $fg_color; - } - } - } -} - -/* Events */ -/* -.events-button { @include notification_bubble($flat: true); } - -/* World clocks */ -/* -.world-clocks-button { - @include notification_bubble($flat: true); -} - -.weather-button { - @include notification_bubble($flat: true); -} - - /* Search */ // search entry diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss index 10c1c3f3..9fe5eb8c 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss @@ -225,7 +225,7 @@ $button_bg_color: mix($tc, $c, 5%); &:insensitive { @include button(insensitive); background-color: transparent; - color: transparentize($selected_fg_color, .5); + //color: transparentize($selected_fg_color, .5); } } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch new file mode 100644 index 00000000..a52d04b6 --- /dev/null +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch @@ -0,0 +1,4 @@ +228c228 +< color: transparentize($selected_fg_color, .5); +--- +> //color: transparentize($selected_fg_color, .5); From 309a6746877b2ccbfc8e3bb6f75ad65390ced6dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 2 Mar 2022 20:35:31 +0100 Subject: [PATCH 15/34] Gnome-Shell: code cleanup --- .../Kali-Dark/gnome-shell/gnome-shell.css | 24 ++------------- .../Kali-Light/gnome-shell/gnome-shell.css | 24 ++------------- .../Kali/sass/gnome-shell/_common-tweaks.scss | 30 ++----------------- 3 files changed, 9 insertions(+), 69 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index fb67c026..fff453f0 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2619,24 +2619,6 @@ $_osd_color: if($variant=='light', black, $fg_color); } } -/* App Switcher */ -/* -// switcher onscreen panel -.switcher-list { - .item-box { - &:outlined { - padding: 6px; - border: 3px solid $selected_bg_color; - } - - &:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; - text-shadow: 0 1px 4px transparentize(black, 0.6); - } - } -} - /* Window Picker */ .window-caption { color: black; @@ -2661,7 +2643,7 @@ $_osd_color: if($variant=='light', black, $fg_color); color: transparent; transition-duration: 0s; } -/* TOP BAR */ +/* Top Bar */ #panel { background: rgba(35, 37, 46, 0.8); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } @@ -2756,10 +2738,10 @@ $_osd_color: if($variant=='light', black, $fg_color); background-color: rgba(255, 255, 255, 0.1); border: none; } -.search-provider-icon .list-search-provider-content .list-search-provider-details { +.search-provider-icon .list-search-provider-details { font-weight: bold; } -/* DASHBOARD */ +/* Dash */ #dash { color: white; icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index dfff1d8f..f8c9eb6c 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2615,24 +2615,6 @@ $_osd_color: if($variant=='light', black, $fg_color); } } -/* App Switcher */ -/* -// switcher onscreen panel -.switcher-list { - .item-box { - &:outlined { - padding: 6px; - border: 3px solid $selected_bg_color; - } - - &:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; - text-shadow: 0 1px 4px transparentize(black, 0.6); - } - } -} - /* Window Picker */ .window-caption { color: black; @@ -2657,7 +2639,7 @@ $_osd_color: if($variant=='light', black, $fg_color); color: transparent; transition-duration: 0s; } -/* TOP BAR */ +/* Top Bar */ #panel { background: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } @@ -2752,10 +2734,10 @@ $_osd_color: if($variant=='light', black, $fg_color); background-color: rgba(255, 255, 255, 0.1); border: none; } -.search-provider-icon .list-search-provider-content .list-search-provider-details { +.search-provider-icon .list-search-provider-details { font-weight: bold; } -/* DASHBOARD */ +/* Dash */ #dash { color: white; icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 36e7409d..c888eb43 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -66,26 +66,7 @@ $_osd_color: if($variant=='light', black, $fg_color); } } -/* App Switcher */ -/* -// switcher onscreen panel -.switcher-list { - .item-box { - &:outlined { - padding: 6px; - border: 3px solid $selected_bg_color; - } - - &:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; - text-shadow: 0 1px 4px transparentize(black, 0.6); - } - } -} - /* Window Picker */ - // Window titles .window-caption { color: black; @@ -117,7 +98,7 @@ $_osd_color: if($variant=='light', black, $fg_color); } } -/* TOP BAR */ +/* Top Bar */ #panel { $_panel_bg: transparentize($bg_color, .2); $_panel_fg: if($variant=='light', black, white); @@ -186,7 +167,6 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* Search */ - // search entry .search-entry { color: black; @@ -232,13 +212,9 @@ $_osd_color: if($variant=='light', black, $fg_color); } // search result provider -.search-provider-icon { - .list-search-provider-content { - .list-search-provider-details { font-weight: bold; } - } -} +.search-provider-icon .list-search-provider-details { font-weight: bold; } -/* DASHBOARD */ +/* Dash */ #dash { color: $osd_fg_color; icon-shadow: 0 2px 6px transparentize(black, .6); From 3b5b128c0b13241c5c6228dbc61ac942780b66ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 2 Mar 2022 20:53:06 +0100 Subject: [PATCH 16/34] Gnome-Shell: update checkbox theme tweaks --- .../assets/calendar-today-light.svg | 1 + .../gnome-shell/assets/calendar-today.svg | 179 +----------------- .../gnome-shell/assets/checkbox-dark.svg | 1 - .../assets/checkbox-focused-dark.svg | 1 - .../gnome-shell/assets/checkbox-focused.svg | 2 +- .../gnome-shell/assets/checkbox-off-dark.svg | 1 - .../assets/checkbox-off-focused-dark.svg | 1 - .../assets/checkbox-off-focused-light.svg | 1 + .../assets/checkbox-off-focused.svg | 2 +- .../gnome-shell/assets/checkbox-off-light.svg | 1 + .../gnome-shell/assets/checkbox-off.svg | 2 +- .../Kali-Dark/gnome-shell/assets/checkbox.svg | 2 +- .../Kali-Dark/gnome-shell/gnome-shell.css | 16 -- .../Kali-Light/gnome-shell/gnome-shell.css | 16 -- .../Kali/sass/gnome-shell/_common-tweaks.scss | 16 -- 15 files changed, 8 insertions(+), 234 deletions(-) create mode 100644 share/themes/Kali-Dark/gnome-shell/assets/calendar-today-light.svg delete mode 100644 share/themes/Kali-Dark/gnome-shell/assets/checkbox-dark.svg delete mode 100644 share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused-dark.svg delete mode 100644 share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-dark.svg delete mode 100644 share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-dark.svg create mode 100644 share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-light.svg create mode 100644 share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-light.svg diff --git a/share/themes/Kali-Dark/gnome-shell/assets/calendar-today-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/calendar-today-light.svg new file mode 100644 index 00000000..b63f6e03 --- /dev/null +++ b/share/themes/Kali-Dark/gnome-shell/assets/calendar-today-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/share/themes/Kali-Dark/gnome-shell/assets/calendar-today.svg b/share/themes/Kali-Dark/gnome-shell/assets/calendar-today.svg index 5e77084c..daf86ec0 100644 --- a/share/themes/Kali-Dark/gnome-shell/assets/calendar-today.svg +++ b/share/themes/Kali-Dark/gnome-shell/assets/calendar-today.svg @@ -1,178 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - + \ No newline at end of file diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-dark.svg deleted file mode 100644 index 4a0881f5..00000000 --- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused-dark.svg deleted file mode 100644 index 30d7919b..00000000 --- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused.svg index 248c5256..0339addf 100644 --- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused.svg +++ b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused.svg @@ -1 +1 @@ - + diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-dark.svg deleted file mode 100644 index f4c27c00..00000000 --- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-dark.svg deleted file mode 100644 index 7d5e726f..00000000 --- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-light.svg new file mode 100644 index 00000000..4f0c5720 --- /dev/null +++ b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-light.svg @@ -0,0 +1 @@ + diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused.svg index 776536af..17f3bc69 100644 --- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused.svg +++ b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused.svg @@ -1 +1 @@ - + diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-light.svg new file mode 100644 index 00000000..569f033f --- /dev/null +++ b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-light.svg @@ -0,0 +1 @@ + diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off.svg index 33d5514f..59f77728 100644 --- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off.svg +++ b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off.svg @@ -1 +1 @@ - + diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox.svg index 8f0f0efd..42434726 100644 --- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox.svg +++ b/share/themes/Kali-Dark/gnome-shell/assets/checkbox.svg @@ -1 +1 @@ - + diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index fff453f0..39d0c174 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2584,22 +2584,6 @@ $_osd_color: if($variant=='light', black, $fg_color); -barlevel-border-width: 0; -slider-handle-radius: 0; } -/* Check Boxes */ -/* -.check-box { - StBin { - background-image: if($variant == 'light', url("assets/checkbox-off.svg"), - url("assets/checkbox-off-dark.svg")); - } - - &:focus StBin { background-image: if($variant == 'light', url("assets/checkbox-off-focused.svg"), - url("assets/checkbox-off-focused-dark.svg")); } - &:checked StBin { background-image: if($variant == 'light', url("assets/checkbox.svg"), - url("assets/checkbox-dark.svg")); } - &:focus:checked StBin { background-image: if($variant == 'light', url("assets/checkbox-focused.svg"), - url("assets/checkbox-focused-dark.svg")); } -} - /* Switches */ /* .toggle-switch { diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index f8c9eb6c..2a78ccf8 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2580,22 +2580,6 @@ $_osd_color: if($variant=='light', black, $fg_color); -barlevel-border-width: 0; -slider-handle-radius: 0; } -/* Check Boxes */ -/* -.check-box { - StBin { - background-image: if($variant == 'light', url("assets/checkbox-off.svg"), - url("assets/checkbox-off-dark.svg")); - } - - &:focus StBin { background-image: if($variant == 'light', url("assets/checkbox-off-focused.svg"), - url("assets/checkbox-off-focused-dark.svg")); } - &:checked StBin { background-image: if($variant == 'light', url("assets/checkbox.svg"), - url("assets/checkbox-dark.svg")); } - &:focus:checked StBin { background-image: if($variant == 'light', url("assets/checkbox-focused.svg"), - url("assets/checkbox-focused-dark.svg")); } -} - /* Switches */ /* .toggle-switch { diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index c888eb43..445f05b8 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -31,22 +31,6 @@ $_osd_color: if($variant=='light', black, $fg_color); -slider-handle-radius: 0; } -/* Check Boxes */ -/* -.check-box { - StBin { - background-image: if($variant == 'light', url("assets/checkbox-off.svg"), - url("assets/checkbox-off-dark.svg")); - } - - &:focus StBin { background-image: if($variant == 'light', url("assets/checkbox-off-focused.svg"), - url("assets/checkbox-off-focused-dark.svg")); } - &:checked StBin { background-image: if($variant == 'light', url("assets/checkbox.svg"), - url("assets/checkbox-dark.svg")); } - &:focus:checked StBin { background-image: if($variant == 'light', url("assets/checkbox-focused.svg"), - url("assets/checkbox-focused-dark.svg")); } -} - /* Switches */ /* .toggle-switch { From 910260d50c742f6c693670d29da68d8f40d08df4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Thu, 3 Mar 2022 09:02:30 +0100 Subject: [PATCH 17/34] Gnome-Shell: update switches theme tweaks --- .../Kali-Dark/gnome-shell/assets/toggle-off-dark.svg | 1 - .../Kali-Dark/gnome-shell/assets/toggle-off-light.svg | 1 + .../Kali-Dark/gnome-shell/assets/toggle-off.svg | 2 +- .../Kali-Dark/gnome-shell/assets/toggle-on-dark.svg | 1 - .../Kali-Dark/gnome-shell/assets/toggle-on-light.svg | 1 + .../themes/Kali-Dark/gnome-shell/assets/toggle-on.svg | 2 +- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 11 +---------- share/themes/Kali-Light/gnome-shell/gnome-shell.css | 11 +---------- src/themes/Kali/sass/gnome-shell/_common-tweaks.scss | 11 +---------- 9 files changed, 7 insertions(+), 34 deletions(-) delete mode 100644 share/themes/Kali-Dark/gnome-shell/assets/toggle-off-dark.svg create mode 100644 share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg delete mode 100644 share/themes/Kali-Dark/gnome-shell/assets/toggle-on-dark.svg create mode 100644 share/themes/Kali-Dark/gnome-shell/assets/toggle-on-light.svg diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-dark.svg deleted file mode 100644 index 3ea0ddd4..00000000 --- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg new file mode 100644 index 00000000..654f88c3 --- /dev/null +++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg @@ -0,0 +1 @@ + diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg index 178435fc..cba25060 100644 --- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg +++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg @@ -1 +1 @@ - + diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-dark.svg deleted file mode 100644 index e814fbba..00000000 --- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-light.svg new file mode 100644 index 00000000..6368ef17 --- /dev/null +++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-light.svg @@ -0,0 +1 @@ + diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg index 47e93acb..9bbee49d 100644 --- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg +++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg @@ -1 +1 @@ - + diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 39d0c174..231dc88e 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2584,17 +2584,8 @@ $_osd_color: if($variant=='light', black, $fg_color); -barlevel-border-width: 0; -slider-handle-radius: 0; } -/* Switches */ +/* Popovers/Menus */ /* -.toggle-switch { - background-image: if($variant == 'light', url("assets/toggle-off.svg"), - url("assets/toggle-off-dark.svg")); - &:checked { - background-image: if($variant == 'light', url("assets/toggle-on.svg"), - url("assets/toggle-on-dark.svg")); - } -} - // menu items .popup-menu-item { &.selected, &:active { diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 2a78ccf8..2ea51656 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2580,17 +2580,8 @@ $_osd_color: if($variant=='light', black, $fg_color); -barlevel-border-width: 0; -slider-handle-radius: 0; } -/* Switches */ +/* Popovers/Menus */ /* -.toggle-switch { - background-image: if($variant == 'light', url("assets/toggle-off.svg"), - url("assets/toggle-off-dark.svg")); - &:checked { - background-image: if($variant == 'light', url("assets/toggle-on.svg"), - url("assets/toggle-on-dark.svg")); - } -} - // menu items .popup-menu-item { &.selected, &:active { diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 445f05b8..f42c968e 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -31,17 +31,8 @@ $_osd_color: if($variant=='light', black, $fg_color); -slider-handle-radius: 0; } -/* Switches */ +/* Popovers/Menus */ /* -.toggle-switch { - background-image: if($variant == 'light', url("assets/toggle-off.svg"), - url("assets/toggle-off-dark.svg")); - &:checked { - background-image: if($variant == 'light', url("assets/toggle-on.svg"), - url("assets/toggle-on-dark.svg")); - } -} - // menu items .popup-menu-item { &.selected, &:active { From e8b75a130210976bc1811043b4a35e483013a68d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Thu, 3 Mar 2022 09:25:08 +0100 Subject: [PATCH 18/34] Gnome-Shell: reduce height of switch assets --- share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg | 2 +- share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg | 2 +- share/themes/Kali-Dark/gnome-shell/assets/toggle-on-light.svg | 2 +- share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg index 654f88c3..80872d56 100644 --- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg +++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg @@ -1 +1 @@ - + diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg index cba25060..9f239682 100644 --- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg +++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg @@ -1 +1 @@ - + diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-light.svg index 6368ef17..cb6c6f87 100644 --- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-light.svg +++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-light.svg @@ -1 +1 @@ - + diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg index 9bbee49d..0178478e 100644 --- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg +++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg @@ -1 +1 @@ - + From 7c41266871ff00a6c2a4f773635db7a2deeaed0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Mon, 7 Mar 2022 18:55:58 +0100 Subject: [PATCH 19/34] Gnome-Shell: update upstream to 42.rc --- .../Kali-Dark/gnome-shell/gnome-shell.css | 176 +++++++++--------- .../Kali-Light/gnome-shell/gnome-shell.css | 176 +++++++++--------- .../upstream/gnome-shell-sass/_common.scss | 8 +- .../gnome-shell-sass/widgets/_app-grid.scss | 27 +-- .../gnome-shell-sass/widgets/_dash.scss | 16 +- .../widgets/_message-list.scss | 8 +- .../gnome-shell-sass/widgets/_popovers.scss | 44 +++-- .../widgets/_search-results.scss | 24 +-- .../widgets/_switcher-popup.scss | 3 +- .../Kali/sass/gnome-shell/upstream/sync.sh | 2 +- 10 files changed, 255 insertions(+), 229 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 231dc88e..5ffb20f4 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -37,6 +37,7 @@ stage { .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon, .dash-item-container .show-apps .overview-icon, .list-search-result, .search-provider-icon, .switcher-list .item-box { border-radius: 16px; padding: 6px; + spacing: 6px; border: 2px solid transparent; transition-duration: 100ms; text-align: center; } @@ -47,7 +48,7 @@ stage { border-radius: 11px; border: 1px solid rgba(238, 238, 236, 0.07); } -#LookingGlassDialog > #Toolbar .lg-toolbar-button, .button { +#LookingGlassDialog > #Toolbar .lg-toolbar-button, .app-folder-dialog .folder-name-container .edit-folder-button, .button { border-radius: 6px; border-style: solid; border-width: 1px; @@ -55,39 +56,42 @@ stage { padding: 3px 24px; color: #eeeeec; background-color: #2d2f38; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .button:focus { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { color: #eeeeec; background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .button:focus:hover { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover { background-color: #333d54; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .button:focus:active { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active { background-color: #39435b; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .button:hover { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { color: #eeeeec; background-color: #343640; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .button:insensitive { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .button:active { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { color: #eeeeec; background-color: #3b3d49; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .button:checked { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked { color: #eeeeec; background-color: #414451; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .button:checked:hover { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover { background-color: #484b5a; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .button:checked:active { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active { background-color: #4f5362; } .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { padding: 12px; font-weight: bold !important; - margin-right: 1px; color: #eeeeec; background-color: #3b3f4b; } + .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr { + margin-right: 1px; } + .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl { + margin-left: 1px; } .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); } @@ -123,9 +127,10 @@ stage { border-radius: 0 0 10px 0; } .modal-dialog .modal-dialog-linked-button:last-child:rtl, .hotplug-notification-item:last-child:rtl, .notification-banner .notification-button:last-child:rtl { border-radius: 0 0 0 10px; - margin-right: 0 !important; } + margin-left: 0 !important; } .modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child { border-radius: 0 0 10px 10px !important; + margin-left: 0 !important; margin-right: 0 !important; } .screenshot-ui-show-pointer-button, .screenshot-ui-type-button { @@ -167,11 +172,7 @@ stage { background-color: #5b6173; } /* General Typography */ -.search-statustext { - font-weight: 300; - font-size: 24pt; } - -.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry { +.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { font-weight: 800; font-size: 20pt; } @@ -327,13 +328,12 @@ StScrollBar { /* Popovers/Menus */ .popup-menu-boxpointer, .candidate-popup-boxpointer { - margin: 4px; } + -arrow-rise: 6px; } .popup-menu { min-width: 15em; color: #eeeeec; } .popup-menu.panel-menu { - -boxpointer-gap: 6px; margin-bottom: 1.75em; } .popup-menu-content, .candidate-popup-content { @@ -346,8 +346,13 @@ StScrollBar { .popup-menu-item { padding: 9px 12px; border-radius: 8px; + spacing: 6px; transition: 0.2s all ease; background-color: transparent; } + .popup-menu-item:ltr { + padding-left: 6px; } + .popup-menu-item:rtl { + padding-right: 6px; } .popup-menu-item:focus, .popup-menu-item:hover { background-color: #2b2f3a !important; } .popup-menu-item:focus:active, .popup-menu-item:hover:active { @@ -367,6 +372,10 @@ StScrollBar { color: #fcfcfc; } .popup-menu-item:insensitive { color: rgba(238, 238, 236, 0.5); } + .popup-menu-item .toggle-switch:ltr { + margin-left: 4px; } + .popup-menu-item .toggle-switch:rtl { + margin-right: 4px; } .popup-inactive-menu-item { color: #eeeeec; } @@ -377,12 +386,6 @@ StScrollBar { .popup-menu-icon { icon-size: 16px !important; } -.popup-menu-arrow:ltr { - margin-right: 4px; } - -.popup-menu-arrow:rtl { - margin-left: 4px; } - .popup-sub-menu { background-color: #363a48; border-radius: 0 0 8px 8px; } @@ -415,22 +418,28 @@ StScrollBar { text-align: left; } .popup-separator-menu-item { - padding: 0; - margin: 6px 0; } + margin: 6px 0; + padding: 0 !important; } + .popup-separator-menu-item:ltr { + margin-right: 4px; } + .popup-separator-menu-item:rtl { + margin-left: 4px; } .popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; background-color: #0d0e11; } .popup-separator-menu-item .popup-menu-ornament { width: 0 !important; } .popup-sub-menu .popup-separator-menu-item { - padding: 0; - margin-right: 2.5em !important; background-color: transparent; } + .popup-sub-menu .popup-separator-menu-item:ltr { + margin-right: 2.5em; } + .popup-sub-menu .popup-separator-menu-item:rtl { + margin-left: 2.5em; } .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { background-color: #1c1e25; } .background-menu { - -boxpointer-gap: 4px; + -boxpointer-gap: 0px; -arrow-rise: 0px; } .aggregate-menu { @@ -444,16 +453,12 @@ StScrollBar { .aggregate-menu .popup-menu-icon:rtl { margin-left: 8px; } .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr { - margin-left: 8px; } + margin-left: 1em; } .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { - margin-right: 8px; } + margin-right: 1em; } .app-menu { max-width: 27.25em; } - .app-menu .popup-menu-content, .app-menu .candidate-popup-content { - margin: 4px; } - .app-menu.panel-menu .popup-menu-content, .app-menu.panel-menu .candidate-popup-content { - margin: 0; } .app-menu .popup-menu-ornament { width: 0 !important; } .app-menu .popup-inactive-menu-item:first-child > StLabel:ltr { @@ -722,7 +727,7 @@ StScrollBar { /* Message List */ .message-list { - width: 32em; + width: 29em; border: solid #0d0e11; } .message-list:ltr { margin-left: 0; @@ -788,10 +793,11 @@ StScrollBar { color: #eeeeec; background-color: #3b3d49; } .message .message-icon-bin { - padding: 18px; - padding-right: 6px; } - .message .message-icon-bin:rtl { + padding: 18px; } + .message .message-icon-bin:ltr { padding-right: 6px; } + .message .message-icon-bin:rtl { + padding-left: 6px; } .message .message-icon-bin > StIcon { icon-size: 2.18em; -st-icon-style: symbolic; } @@ -1211,6 +1217,8 @@ StScrollBar { .switcher-list .item-box:drop { border: 2px solid rgba(39, 119, 255, 0.8); background-color: rgba(39, 119, 255, 0.2); } + .switcher-list .item-box:hover { + background: none; } .switcher-list .separator { width: 1px; background: #0d0e11; } @@ -1585,12 +1593,14 @@ StScrollBar { padding: 0 4px; } /* Search */ +#searchResults { + margin: 0 4px; } + #searchResultsContent { - max-width: 1024px; - spacing: 8px; } + max-width: 1072px; } .search-section { - spacing: 8px; } + spacing: 18px; } .search-section .search-section-separator { height: 8px; background-color: transparent; } @@ -1599,16 +1609,13 @@ StScrollBar { background-color: #323643; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: none; - text-shadow: none; color: white; padding: 12px; - margin: 4px; } + margin: 0 12px; } .list-search-result, .search-provider-icon { background-color: transparent; - margin: 4px; - border-radius: 8px !important; } + border-radius: 11px; } .list-search-result:hover, .search-provider-icon:hover { background-color: rgba(255, 255, 255, 0.1); } .list-search-result:selected, .search-provider-icon:selected, .list-search-result:focus, .search-provider-icon:focus { @@ -1630,7 +1637,14 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.2); } .grid-search-results { - spacing: 36px; } + spacing: 30px; + margin: 0 12px; } + +.search-provider-icon:ltr { + margin-right: 4px; } + +.search-provider-icon:rtl { + margin-left: 4px; } .search-provider-icon .list-search-provider-content { spacing: 12px; } @@ -1652,7 +1666,7 @@ StScrollBar { /* Dash */ #dash { - margin: 2em; } + margin-top: 12px; } #dash .placeholder { background-image: none; background-size: contain; @@ -1661,16 +1675,25 @@ StScrollBar { width: 32px; height: 32px; } #dash .app-well-app-running-dot { - margin-bottom: 15px; } + margin-bottom: 14px; } .dash-background { background-color: #323643; border-radius: 28px; padding: 12px; - spacing: 6px; } + spacing: 6px; + margin-bottom: 12px; } + +.dash-item-container > * { + margin: 0 2px; } + +.dash-item-container:ltr:first-child { + margin-left: 0; } + +.dash-item-container:rtl:first-child { + margin-right: 0; } .dash-item-container .app-well-app .overview-icon, .dash-item-container .grid-search-result .overview-icon { - margin: 0 4px; padding: 6px; } .dash-item-container .show-apps .overview-icon { @@ -1700,9 +1723,14 @@ StScrollBar { border: 2px solid rgba(39, 119, 255, 0.8); background-color: rgba(39, 119, 255, 0.2); } +.dash-item-container .show-apps, .dash-item-container .app-well-app, .dash-item-container .grid-search-result { + padding-bottom: 12px; } + .dash-separator { width: 1px; - background-color: #0d0e11; } + margin: 0 4px; + background-color: #0d0e11; + margin-bottom: 12px; } .dash-label { color: white; @@ -1716,12 +1744,12 @@ StScrollBar { .icon-grid { row-spacing: 12px; column-spacing: 12px; - max-row-spacing: 72px; - max-column-spacing: 72px; + max-row-spacing: 42px; + max-column-spacing: 42px; page-padding-top: 24px; page-padding-bottom: 24px; - page-padding-left: 12px; - page-padding-right: 12px; } + page-padding-left: 18px; + page-padding-right: 18px; } /* App Icons */ .app-well-app .overview-icon, .grid-search-result .overview-icon { @@ -1786,8 +1814,7 @@ StScrollBar { .app-folder-dialog { border-radius: 32px; - background-color: #323643; - padding: 12px 0px 12px 0px; } + background-color: #323643; } .app-folder-dialog .folder-name-container { padding: 24px 36px 0; spacing: 12px; @@ -1798,31 +1825,10 @@ StScrollBar { padding: 5px 7px; color: white; } .app-folder-dialog .folder-name-container .edit-folder-button { - background-color: transparent; - background-color: none; + padding: 0; width: 36px; height: 36px; - border-radius: 18px; } - .app-folder-dialog .folder-name-container .edit-folder-button:insensitive { - color: rgba(238, 238, 236, 0.5); - background-color: rgba(238, 238, 236, 0.05); - background-color: transparent; } - .app-folder-dialog .folder-name-container .edit-folder-button:focus { - color: #eeeeec; - background-color: #2c364c; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover { - background-color: #333d54; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .app-folder-dialog .folder-name-container .edit-folder-button:focus:active { - background-color: #39435b; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .app-folder-dialog .folder-name-container .edit-folder-button:hover { - color: #eeeeec; - background-color: #343640; } - .app-folder-dialog .folder-name-container .edit-folder-button:active { - color: #eeeeec; - background-color: #3b3d49; } + border-radius: 99px; } .app-folder-dialog .folder-name-container .edit-folder-button > StIcon { icon-size: 1.09em; } .app-folder-dialog .icon-grid { @@ -1837,8 +1843,8 @@ StScrollBar { .app-folder-dialog-container { padding: 12px; - width: 620px; - height: 620px; } + width: 640px; + height: 640px; } .app-well-app-running-dot { height: 5px; diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 2ea51656..1b995b6e 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -37,6 +37,7 @@ stage { .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon, .dash-item-container .show-apps .overview-icon, .list-search-result, .search-provider-icon, .switcher-list .item-box { border-radius: 16px; padding: 6px; + spacing: 6px; border: 2px solid transparent; transition-duration: 100ms; text-align: center; } @@ -47,7 +48,7 @@ stage { border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.8); } -#LookingGlassDialog > #Toolbar .lg-toolbar-button, .button { +#LookingGlassDialog > #Toolbar .lg-toolbar-button, .app-folder-dialog .folder-name-container .edit-folder-button, .button { border-radius: 6px; border-style: solid; border-width: 1px; @@ -55,39 +56,42 @@ stage { padding: 3px 24px; color: #5c616c; background-color: #f7f7f8; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .button:focus { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { color: #5c616c; background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .button:focus:hover { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover { background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .button:focus:active { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active { background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .button:hover { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { color: #5c616c; background-color: white; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .button:insensitive { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .button:active { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { color: #5c616c; background-color: white; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .button:checked { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked { color: #5c616c; background-color: white; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .button:checked:hover { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover { background-color: white; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .button:checked:active { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active { background-color: white; } .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { padding: 12px; font-weight: bold !important; - margin-right: 1px; color: #5c616c; background-color: #dadadb; } + .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr { + margin-right: 1px; } + .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl { + margin-left: 1px; } .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); } @@ -123,9 +127,10 @@ stage { border-radius: 0 0 10px 0; } .modal-dialog .modal-dialog-linked-button:last-child:rtl, .hotplug-notification-item:last-child:rtl, .notification-banner .notification-button:last-child:rtl { border-radius: 0 0 0 10px; - margin-right: 0 !important; } + margin-left: 0 !important; } .modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child { border-radius: 0 0 10px 10px !important; + margin-left: 0 !important; margin-right: 0 !important; } .screenshot-ui-show-pointer-button, .screenshot-ui-type-button { @@ -167,11 +172,7 @@ stage { background-color: #535a6e; } /* General Typography */ -.search-statustext { - font-weight: 300; - font-size: 24pt; } - -.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry { +.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { font-weight: 800; font-size: 20pt; } @@ -327,13 +328,12 @@ StScrollBar { /* Popovers/Menus */ .popup-menu-boxpointer, .candidate-popup-boxpointer { - margin: 4px; } + -arrow-rise: 6px; } .popup-menu { min-width: 15em; color: #5c616c; } .popup-menu.panel-menu { - -boxpointer-gap: 6px; margin-bottom: 1.75em; } .popup-menu-content, .candidate-popup-content { @@ -346,8 +346,13 @@ StScrollBar { .popup-menu-item { padding: 9px 12px; border-radius: 8px; + spacing: 6px; transition: 0.2s all ease; background-color: transparent; } + .popup-menu-item:ltr { + padding-left: 6px; } + .popup-menu-item:rtl { + padding-right: 6px; } .popup-menu-item:focus, .popup-menu-item:hover { background-color: #f7f7f7 !important; } .popup-menu-item:focus:active, .popup-menu-item:hover:active { @@ -367,6 +372,10 @@ StScrollBar { color: #50555e; } .popup-menu-item:insensitive { color: rgba(92, 97, 108, 0.5); } + .popup-menu-item .toggle-switch:ltr { + margin-left: 4px; } + .popup-menu-item .toggle-switch:rtl { + margin-right: 4px; } .popup-inactive-menu-item { color: #5c616c; } @@ -377,12 +386,6 @@ StScrollBar { .popup-menu-icon { icon-size: 16px !important; } -.popup-menu-arrow:ltr { - margin-right: 4px; } - -.popup-menu-arrow:rtl { - margin-left: 4px; } - .popup-sub-menu { background-color: #ededed; border-radius: 0 0 8px 8px; } @@ -415,22 +418,28 @@ StScrollBar { text-align: left; } .popup-separator-menu-item { - padding: 0; - margin: 6px 0; } + margin: 6px 0; + padding: 0 !important; } + .popup-separator-menu-item:ltr { + margin-right: 4px; } + .popup-separator-menu-item:rtl { + margin-left: 4px; } .popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; background-color: #d9d9d9; } .popup-separator-menu-item .popup-menu-ornament { width: 0 !important; } .popup-sub-menu .popup-separator-menu-item { - padding: 0; - margin-right: 2.5em !important; background-color: transparent; } + .popup-sub-menu .popup-separator-menu-item:ltr { + margin-right: 2.5em; } + .popup-sub-menu .popup-separator-menu-item:rtl { + margin-left: 2.5em; } .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { background-color: #ebebeb; } .background-menu { - -boxpointer-gap: 4px; + -boxpointer-gap: 0px; -arrow-rise: 0px; } .aggregate-menu { @@ -444,16 +453,12 @@ StScrollBar { .aggregate-menu .popup-menu-icon:rtl { margin-left: 8px; } .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr { - margin-left: 8px; } + margin-left: 1em; } .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { - margin-right: 8px; } + margin-right: 1em; } .app-menu { max-width: 27.25em; } - .app-menu .popup-menu-content, .app-menu .candidate-popup-content { - margin: 4px; } - .app-menu.panel-menu .popup-menu-content, .app-menu.panel-menu .candidate-popup-content { - margin: 0; } .app-menu .popup-menu-ornament { width: 0 !important; } .app-menu .popup-inactive-menu-item:first-child > StLabel:ltr { @@ -722,7 +727,7 @@ StScrollBar { /* Message List */ .message-list { - width: 32em; + width: 29em; border: solid #d9d9d9; } .message-list:ltr { margin-left: 0; @@ -788,10 +793,11 @@ StScrollBar { color: #5c616c; background-color: white; } .message .message-icon-bin { - padding: 18px; - padding-right: 6px; } - .message .message-icon-bin:rtl { + padding: 18px; } + .message .message-icon-bin:ltr { padding-right: 6px; } + .message .message-icon-bin:rtl { + padding-left: 6px; } .message .message-icon-bin > StIcon { icon-size: 2.18em; -st-icon-style: symbolic; } @@ -1211,6 +1217,8 @@ StScrollBar { .switcher-list .item-box:drop { border: 2px solid rgba(39, 119, 255, 0.8); background-color: rgba(39, 119, 255, 0.2); } + .switcher-list .item-box:hover { + background: none; } .switcher-list .separator { width: 1px; background: #d9d9d9; } @@ -1585,12 +1593,14 @@ StScrollBar { padding: 0 4px; } /* Search */ +#searchResults { + margin: 0 4px; } + #searchResultsContent { - max-width: 1024px; - spacing: 8px; } + max-width: 1072px; } .search-section { - spacing: 8px; } + spacing: 18px; } .search-section .search-section-separator { height: 8px; background-color: transparent; } @@ -1599,16 +1609,13 @@ StScrollBar { background-color: #323643; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: none; - text-shadow: none; color: white; padding: 12px; - margin: 4px; } + margin: 0 12px; } .list-search-result, .search-provider-icon { background-color: transparent; - margin: 4px; - border-radius: 8px !important; } + border-radius: 11px; } .list-search-result:hover, .search-provider-icon:hover { background-color: rgba(255, 255, 255, 0.1); } .list-search-result:selected, .search-provider-icon:selected, .list-search-result:focus, .search-provider-icon:focus { @@ -1630,7 +1637,14 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.2); } .grid-search-results { - spacing: 36px; } + spacing: 30px; + margin: 0 12px; } + +.search-provider-icon:ltr { + margin-right: 4px; } + +.search-provider-icon:rtl { + margin-left: 4px; } .search-provider-icon .list-search-provider-content { spacing: 12px; } @@ -1652,7 +1666,7 @@ StScrollBar { /* Dash */ #dash { - margin: 2em; } + margin-top: 12px; } #dash .placeholder { background-image: none; background-size: contain; @@ -1661,16 +1675,25 @@ StScrollBar { width: 32px; height: 32px; } #dash .app-well-app-running-dot { - margin-bottom: 15px; } + margin-bottom: 14px; } .dash-background { background-color: #323643; border-radius: 28px; padding: 12px; - spacing: 6px; } + spacing: 6px; + margin-bottom: 12px; } + +.dash-item-container > * { + margin: 0 2px; } + +.dash-item-container:ltr:first-child { + margin-left: 0; } + +.dash-item-container:rtl:first-child { + margin-right: 0; } .dash-item-container .app-well-app .overview-icon, .dash-item-container .grid-search-result .overview-icon { - margin: 0 4px; padding: 6px; } .dash-item-container .show-apps .overview-icon { @@ -1700,9 +1723,14 @@ StScrollBar { border: 2px solid rgba(39, 119, 255, 0.8); background-color: rgba(39, 119, 255, 0.2); } +.dash-item-container .show-apps, .dash-item-container .app-well-app, .dash-item-container .grid-search-result { + padding-bottom: 12px; } + .dash-separator { width: 1px; - background-color: #d9d9d9; } + margin: 0 4px; + background-color: #d9d9d9; + margin-bottom: 12px; } .dash-label { color: white; @@ -1716,12 +1744,12 @@ StScrollBar { .icon-grid { row-spacing: 12px; column-spacing: 12px; - max-row-spacing: 72px; - max-column-spacing: 72px; + max-row-spacing: 42px; + max-column-spacing: 42px; page-padding-top: 24px; page-padding-bottom: 24px; - page-padding-left: 12px; - page-padding-right: 12px; } + page-padding-left: 18px; + page-padding-right: 18px; } /* App Icons */ .app-well-app .overview-icon, .grid-search-result .overview-icon { @@ -1786,8 +1814,7 @@ StScrollBar { .app-folder-dialog { border-radius: 32px; - background-color: #323643; - padding: 12px 0px 12px 0px; } + background-color: #323643; } .app-folder-dialog .folder-name-container { padding: 24px 36px 0; spacing: 12px; @@ -1798,31 +1825,10 @@ StScrollBar { padding: 5px 7px; color: white; } .app-folder-dialog .folder-name-container .edit-folder-button { - background-color: transparent; - background-color: none; + padding: 0; width: 36px; height: 36px; - border-radius: 18px; } - .app-folder-dialog .folder-name-container .edit-folder-button:insensitive { - color: rgba(92, 97, 108, 0.5); - background-color: rgba(92, 97, 108, 0.05); - background-color: transparent; } - .app-folder-dialog .folder-name-container .edit-folder-button:focus { - color: #5c616c; - background-color: #e2eaf9; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .app-folder-dialog .folder-name-container .edit-folder-button:focus:active { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .app-folder-dialog .folder-name-container .edit-folder-button:hover { - color: #5c616c; - background-color: white; } - .app-folder-dialog .folder-name-container .edit-folder-button:active { - color: #5c616c; - background-color: white; } + border-radius: 99px; } .app-folder-dialog .folder-name-container .edit-folder-button > StIcon { icon-size: 1.09em; } .app-folder-dialog .icon-grid { @@ -1837,8 +1843,8 @@ StScrollBar { .app-folder-dialog-container { padding: 12px; - width: 620px; - height: 620px; } + width: 640px; + height: 640px; } .app-well-app-running-dot { height: 5px; diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss index fa6f4b40..c7c3143a 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss @@ -84,6 +84,7 @@ stage { %tile { border-radius: $base_border_radius * 2; // 16px padding: $base_padding; + spacing: $base_padding; border: 2px solid transparent; transition-duration: 100ms; text-align: center; @@ -122,7 +123,9 @@ $bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($ %bubble_button { padding: $base_padding * 2; font-weight: bold !important; - margin-right: 1px; + + &:ltr {margin-right: 1px;} + &:rtl {margin-left: 1px;} @include button(normal, $c:$bubble_buttons_color); &:insensitive { @include button(insensitive, $c:$bubble_buttons_color);} @@ -146,11 +149,12 @@ $bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($ &:last-child:rtl { border-radius: 0 0 0 $bubble_button_radius; - margin-right: 0 !important; + margin-left: 0 !important; } &:first-child:last-child { border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important; + margin-left: 0 !important; margin-right: 0 !important; } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss index 05a71751..c936e4b6 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss @@ -6,12 +6,12 @@ $app_icon_size: 96px; .icon-grid { row-spacing: $base_padding * 2; column-spacing: $base_padding * 2; - max-row-spacing: $base_padding * 12; - max-column-spacing: $base_padding * 12; + max-row-spacing: $base_padding * 7; + max-column-spacing: $base_padding * 7; page-padding-top: $base_padding * 4; page-padding-bottom: $base_padding * 4; - page-padding-left: $base_padding * 2; - page-padding-right: $base_padding * 2; + page-padding-left: $base_padding * 3; + page-padding-right: $base_padding * 3; } /* App Icons */ @@ -20,9 +20,7 @@ $app_icon_size: 96px; .app-well-app { @include overview_icon($osd_fg_color); - .overview-icon { - padding: $base_padding*2; - } + .overview-icon { padding: $base_padding*2;} .overview-icon.overview-icon-with-label { > StBoxLayout { spacing: $base_padding; @@ -39,7 +37,6 @@ $app_icon_size: 96px; .app-folder-dialog { border-radius: $modal_radius*2; background-color: $dash_background_color; - padding: 12px 0px 12px 0px; & .folder-name-container { padding: 24px 36px 0; @@ -56,15 +53,11 @@ $app_icon_size: 96px; & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; } & .edit-folder-button { - @include button(undecorated); + @extend %button; + padding: 0; width: 36px; height: 36px; - border-radius: 18px; - - &:focus {@include button(focus);} - &:hover {@include button(hover);} - &:active {@include button(active);} - + border-radius: 99px; & > StIcon { icon-size: $base_icon_size } } } @@ -85,8 +78,8 @@ $app_icon_size: 96px; .app-folder-dialog-container { padding: $base_padding*2; - width: 620px; - height: 620px; + width: 640px; + height: 640px; } // Running app indicator (also shown in dash) diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss index ac14cff1..94e3257e 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss @@ -8,7 +8,7 @@ $dash_border_radius: $modal_radius + $dash_padding; // container for the dash #dash { @extend %caption; - margin: 2em; + margin-top: $dash_padding; .placeholder { // background-image: url("assets/dash-placeholder.svg"); @@ -24,7 +24,7 @@ $dash_border_radius: $modal_radius + $dash_padding; // Running app indicator (also shown in app grid) .app-well-app-running-dot { - margin-bottom: 15px; // hardcoded + margin-bottom: 14px; // hardcoded } } @@ -34,24 +34,34 @@ $dash_border_radius: $modal_radius + $dash_padding; border-radius: $dash_border_radius; padding: $dash_padding; spacing: $base_padding; + margin-bottom: $dash_padding; } // items on the dash .dash-item-container { + > * {margin: 0 2px;} + &:ltr:first-child {margin-left: 0;} + &:rtl:first-child {margin-right: 0;} + // each app item on the dash .app-well-app .overview-icon { - margin: 0 4px; padding: $base_padding; } // show apps button .show-apps { @include overview_icon($osd_fg_color);} + + .show-apps, .app-well-app { + padding-bottom: $dash_padding; + } } // separator between favourites and running apps .dash-separator { width: 1px; + margin: 0 $base_margin; background-color: $borders_color; + margin-bottom: $dash_padding; } // OSD Tooltip diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss index ac2e8efe..7f93e817 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss @@ -3,7 +3,7 @@ // main list .message-list { - width: 32em; + width: 29em; border: solid $borders_color; // padding and margins to account for scrollbar @@ -67,11 +67,9 @@ // icon container .message-icon-bin { padding: ($base_padding * 3); - padding-right:$base_padding; - &:rtl { - padding-right:$base_padding; - } + &:ltr {padding-right:$base_padding;} + &:rtl {padding-left:$base_padding;} // icon size and color > StIcon { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss index fd5a02d4..08ad3246 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss @@ -2,7 +2,7 @@ // the popover itself .popup-menu-boxpointer { - margin: $base_margin; // used as distance from the screen edge + -arrow-rise: $base_margin+2px; // distance from the panel & screen edge } // container of the popover menu @@ -12,7 +12,6 @@ //.popup-status-menu-item {font-weight: normal; color: pink;} //dunno what that is &.panel-menu { - -boxpointer-gap: $base_margin+2px; // distance from the panel margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen } } @@ -20,7 +19,6 @@ // popover content .popup-menu-content { padding: $base_padding; - // account for margin oddities border-radius: $modal_radius - 2px; border: 1px solid $borders_edge; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); @@ -31,9 +29,13 @@ .popup-menu-item { padding: $base_padding*1.5 $base_padding*2; border-radius: $base_border_radius; + spacing: $base_padding; transition: 0.2s all ease; background-color: transparent; + &:ltr {padding-left: $base_padding;} + &:rtl {padding-right: $base_padding;} + &:focus, &:hover { background-color: $hover_bg_color !important; &:active { background-color: $active_bg_color !important;} @@ -55,6 +57,12 @@ } &:insensitive {color: transparentize($fg_color,0.5);} + + // add margin to switches in menu items + .toggle-switch { + &:ltr { margin-left: $base_margin;} + &:rtl { margin-right: $base_margin;} + } } @@ -71,8 +79,6 @@ } .popup-menu-arrow { - &:ltr {margin-right: $base_margin;} - &:rtl {margin-left: $base_margin;} } @@ -104,7 +110,7 @@ .popup-menu-section { .popup-menu-item:last-child { - &:hover,&:focus {border-radius: 0;} + &:hover,&:focus { border-radius: 0;} } &:last-child .popup-menu-item:last-child { border-radius: 0 0 $base_border_radius $base_border_radius; @@ -118,14 +124,16 @@ width: 1.2em; text-align: center !important; - &:ltr {text-align: right;}; - &:rtl {text-align: left;}; + &:ltr { text-align: right;} + &:rtl { text-align: left;} } // separator .popup-separator-menu-item { - padding:0; margin: 6px 0; + padding:0 !important; + &:ltr { margin-right: $base_margin;} + &:rtl { margin-left: $base_margin;} .popup-separator-menu-item-separator { height: 1px; //not really the whole box @@ -136,11 +144,14 @@ width: 0 !important; } + // separators in submenus .popup-sub-menu & { - padding: 0; - margin-right: 2.5em !important; // account for ornament background-color: transparent; + // account for ornament + &:ltr { margin-right: 2.5em;} + &:rtl { margin-left: 2.5em;} + .popup-separator-menu-item-separator { background-color: lighten($borders_color, 7%); } @@ -149,7 +160,7 @@ // desktop background menu .background-menu { - -boxpointer-gap: $base_margin; + -boxpointer-gap: 0px; -arrow-rise: 0px; // hide the beak on the menu } @@ -170,19 +181,14 @@ // account for ornaments in submenus with padding .popup-sub-menu .popup-menu-item > :first-child { // this value is hardcoded for visual effect - &:ltr { margin-left: $base_margin*2;} - &:rtl { margin-right: $base_margin*2;} + &:ltr { margin-left: 1em;} + &:rtl { margin-right: 1em;} } } // right-click (and panel) app menu .app-menu { max-width: 27.25em; - .popup-menu-content { margin: $base_margin;} - - &.panel-menu { - .popup-menu-content { margin: 0;} // avoid doubling up margin - } // this is unneeded at the top-level in this menu, hide it .popup-menu-ornament { width: 0 !important; } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss index 4ad3f082..644c53db 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss @@ -1,15 +1,18 @@ /* Search */ // search overview container +#searchResults { + margin: 0 $base_margin; +} + #searchResultsContent { - max-width: 1024px; - spacing: $base_margin * 2; + max-width: 1072px; } // search results sections "the boxes" .search-section { // This should be equal to #searchResultsContent spacing - spacing: $base_margin * 2; + spacing: $base_padding*3; // separator (unstyled) .search-section-separator { @@ -23,27 +26,24 @@ background-color: lighten($system_bg_color, 5%); border-radius: $modal_radius*1.5; border: 1px solid $osd_outer_borders_color; - box-shadow: none; - text-shadow: none; color: $osd_fg_color; padding: $base_padding*2; - margin: $base_margin; - // This is the space between the provider icon and the results container + margin:0 $base_margin*3; } %search_section_content_item { @include tile_button($osd_fg_color); - margin: $base_margin; - border-radius: $base_border_radius !important; + border-radius: $base_border_radius+3px; } // "no results" text .search-statustext { - @extend %large_title; + @extend %title_1; } .grid-search-results { - spacing: $base_padding * 6; + spacing: $base_padding*5; + margin:0 $base_margin*3; } // Search results with icons @@ -54,6 +54,8 @@ // search result provider .search-provider-icon { @extend %search_section_content_item; + &:ltr {margin-right: $base_margin;} + &:rtl {margin-left: $base_margin;} // content .list-search-provider-content { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss index 892d3351..cec6c9aa 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss @@ -25,8 +25,9 @@ $switcher_border_radius: $modal_radius + 8px; // each item in the list .item-box { - @include tile_button($osd_fg_color); + // override over style so mouse doesn't steal focus + &:hover {background: none;} } .separator { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/sync.sh b/src/themes/Kali/sass/gnome-shell/upstream/sync.sh index f986628b..2892a1ac 100755 --- a/src/themes/Kali/sass/gnome-shell/upstream/sync.sh +++ b/src/themes/Kali/sass/gnome-shell/upstream/sync.sh @@ -4,7 +4,7 @@ GREEN='\033[0;32m' YELLOW='\033[0;33m' RESET='\033[0m' -VERSION=6b60a189fded722ae37a7d3e94d51a509a7d2df1 +VERSION=42.rc echo printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n" From a06a45d7126d95f0e6c38d78b701b2755650d576 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Mon, 7 Mar 2022 20:15:15 +0100 Subject: [PATCH 20/34] Gnome-Shell: remove old assets --- share/themes/Kali-Dark/gnome-shell/assets/kali-dragon-dark.svg | 1 - share/themes/Kali-Dark/gnome-shell/assets/kali-dragon.svg | 1 - 2 files changed, 2 deletions(-) delete mode 100644 share/themes/Kali-Dark/gnome-shell/assets/kali-dragon-dark.svg delete mode 100644 share/themes/Kali-Dark/gnome-shell/assets/kali-dragon.svg diff --git a/share/themes/Kali-Dark/gnome-shell/assets/kali-dragon-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/kali-dragon-dark.svg deleted file mode 100644 index d1a6f293..00000000 --- a/share/themes/Kali-Dark/gnome-shell/assets/kali-dragon-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/share/themes/Kali-Dark/gnome-shell/assets/kali-dragon.svg b/share/themes/Kali-Dark/gnome-shell/assets/kali-dragon.svg deleted file mode 100644 index a5be911f..00000000 --- a/share/themes/Kali-Dark/gnome-shell/assets/kali-dragon.svg +++ /dev/null @@ -1 +0,0 @@ - From eea71d890fcd8d24d4f7ec497ec54091257e170a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Tue, 8 Mar 2022 10:45:15 +0100 Subject: [PATCH 21/34] Gnome-Shell: update message list theme tweaks --- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 8 ++++++++ share/themes/Kali-Light/gnome-shell/gnome-shell.css | 8 ++++++++ src/themes/Kali/sass/gnome-shell/_common-tweaks.scss | 8 ++++++++ 3 files changed, 24 insertions(+) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 5ffb20f4..3b374e23 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2600,6 +2600,14 @@ $_osd_color: if($variant=='light', black, $fg_color); } } +/* Message List */ +.message-list .message-list-placeholder, +.message-list-controls { + font-weight: normal; } + +.message-list-controls { + spacing: 12px; } + /* Window Picker */ .window-caption { color: black; diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 1b995b6e..780d24a7 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2596,6 +2596,14 @@ $_osd_color: if($variant=='light', black, $fg_color); } } +/* Message List */ +.message-list .message-list-placeholder, +.message-list-controls { + font-weight: normal; } + +.message-list-controls { + spacing: 12px; } + /* Window Picker */ .window-caption { color: black; diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index f42c968e..a3981673 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -41,6 +41,14 @@ $_osd_color: if($variant=='light', black, $fg_color); } } +/* Message List */ +.message-list .message-list-placeholder, +.message-list-controls { + font-weight: normal; +} + +.message-list-controls { spacing: $base_padding * 2; } + /* Window Picker */ // Window titles .window-caption { From 6cfd361e6581ebcd17689d76267196545d885896 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Tue, 8 Mar 2022 11:48:41 +0100 Subject: [PATCH 22/34] Gnome-Shell: tweak switches --- .../Kali-Dark/gnome-shell/assets/toggle-off-light.svg | 2 +- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 8 +++++++- share/themes/Kali-Light/gnome-shell/gnome-shell.css | 8 +++++++- src/themes/Kali/sass/gnome-shell/_common-tweaks.scss | 11 ++++++++++- 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg index 80872d56..42c7d7f1 100644 --- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg +++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg @@ -1 +1 @@ - + diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 3b374e23..9a151666 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2584,6 +2584,11 @@ $_osd_color: if($variant=='light', black, $fg_color); } } +/* Switches */ +.toggle-switch { + height: 22px; + width: 44px; } + /* Slider */ .slider { -barlevel-background-color: #0d0e11; @@ -2606,7 +2611,8 @@ $_osd_color: if($variant=='light', black, $fg_color); font-weight: normal; } .message-list-controls { - spacing: 12px; } + spacing: 12px; + font-size: 10pt; } /* Window Picker */ .window-caption { diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 780d24a7..6641b502 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2580,6 +2580,11 @@ $_osd_color: if($variant=='light', black, $fg_color); } } +/* Switches */ +.toggle-switch { + height: 22px; + width: 44px; } + /* Slider */ .slider { -barlevel-background-color: #d9d9d9; @@ -2602,7 +2607,8 @@ $_osd_color: if($variant=='light', black, $fg_color); font-weight: normal; } .message-list-controls { - spacing: 12px; } + spacing: 12px; + font-size: 10pt; } /* Window Picker */ .window-caption { diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index a3981673..3e503998 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -24,6 +24,12 @@ $_osd_color: if($variant=='light', black, $fg_color); } } +/* Switches */ +.toggle-switch { + height: 22px; + width: 44px; +} + /* Slider */ .slider { -barlevel-background-color: $borders_color; @@ -47,7 +53,10 @@ $_osd_color: if($variant=='light', black, $fg_color); font-weight: normal; } -.message-list-controls { spacing: $base_padding * 2; } +.message-list-controls { + spacing: $base_padding * 2; + @include fontsize(10); +} /* Window Picker */ // Window titles From fd47a59861aa7cbde4148d45083f09b1d61414e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 9 Mar 2022 08:23:05 +0100 Subject: [PATCH 23/34] Gnome-Shell: update popover theme tweaks --- .../Kali-Dark/gnome-shell/gnome-shell.css | 102 +++++++++++------- .../Kali-Light/gnome-shell/gnome-shell.css | 80 +++++++++----- .../Kali/sass/gnome-shell/_common-tweaks.scss | 42 ++++++-- .../upstream/gnome-shell-sass/_common.scss | 6 +- .../gnome-shell-sass/_common.scss.patch | 12 +++ 5 files changed, 165 insertions(+), 77 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 9a151666..63cd614d 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -232,8 +232,8 @@ StEntry { selection-background-color: #2777ff; selected-color: #ffffff; } StEntry:hover { - background-color: #363a48; - border-color: #363a48; + background-color: #3b3f4e; + border-color: #3b3f4e; color: rgba(238, 238, 236, 0.7); } StEntry:focus { background-color: #2d3546; @@ -354,21 +354,21 @@ StScrollBar { .popup-menu-item:rtl { padding-right: 6px; } .popup-menu-item:focus, .popup-menu-item:hover { - background-color: #2b2f3a !important; } + background-color: #303340 !important; } .popup-menu-item:focus:active, .popup-menu-item:hover:active { - background-color: #303340 !important; } + background-color: #343845 !important; } .popup-menu-item:checked { - background-color: #363a48 !important; } + background-color: #3b3f4e !important; } .popup-menu-item:checked { margin-bottom: 0; - box-shadow: inset 0 -1px 0 0 #2b2f3a; + box-shadow: inset 0 -1px 0 0 #303340; border-radius: 8px 8px 0 0; } .popup-menu-item:checked:focus, .popup-menu-item:checked:hover { - background-color: #3d4251 !important; } - .popup-menu-item:checked:active { background-color: #414657 !important; } + .popup-menu-item:checked:active { + background-color: #464b5d !important; } .popup-menu-item:active { - background-color: #3b3f4e; + background-color: #3f4454; color: #fcfcfc; } .popup-menu-item:insensitive { color: rgba(238, 238, 236, 0.5); } @@ -387,7 +387,7 @@ StScrollBar { icon-size: 16px !important; } .popup-sub-menu { - background-color: #363a48; + background-color: #3b3f4e; border-radius: 0 0 8px 8px; } .popup-sub-menu .popup-menu-ornament { min-width: 1.09em !important; } @@ -397,13 +397,13 @@ StScrollBar { .popup-sub-menu .popup-menu-item:last-child { border-radius: 0 0 8px 8px; } .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { - background-color: #414657 !important; } - .popup-sub-menu .popup-menu-item:checked { - background-color: #4c5266 !important; } - .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { - background-color: #484d60 !important; } - .popup-sub-menu .popup-menu-item:active { background-color: #464b5d !important; } + .popup-sub-menu .popup-menu-item:checked { + background-color: #51576b !important; } + .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { + background-color: #4c5266 !important; } + .popup-sub-menu .popup-menu-item:active { + background-color: #4a5063 !important; } .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus { border-radius: 0; } .popup-sub-menu .popup-menu-section:last-child .popup-menu-item:last-child { @@ -551,9 +551,9 @@ StScrollBar { margin: 2px; border-radius: 6px; } .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { - background-color: #2b2f3a; } - .calendar .calendar-month-header .pager-button:active { background-color: #303340; } + .calendar .calendar-month-header .pager-button:active { + background-color: #343845; } .calendar .calendar-day-base { text-align: center; margin: 2px; @@ -562,16 +562,16 @@ StScrollBar { width: 32px !important; border-radius: 99px; } .calendar .calendar-day-base:hover { - background-color: #2b2f3a; } + background-color: #303340; } .calendar .calendar-day-base:focus { background-color: #243658; color: #ffffff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { color: #fcfcfc; - background-color: #303340; } + background-color: #343845; } .calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus { - background-color: #2e4166; } + background-color: #31456b; } .calendar .calendar-day-base.calendar-day-heading { color: #888a8d; padding-top: 6px; @@ -846,10 +846,10 @@ StScrollBar { border-radius: 8px; color: #eeeeec; } .message-media-control:hover { - background-color: #363a48; + background-color: #3b3f4e; color: #eeeeec; } .message-media-control:active { - background-color: #3b3f4e; + background-color: #3f4454; color: #eeeeec; } .message-media-control:insensitive { color: #959799; } @@ -885,7 +885,7 @@ StScrollBar { background-color: #2777ff; color: #ffffff; } .candidate-box:hover { - background-color: #2b2f3a; + background-color: #303340; color: #f8f8f7; } .candidate-page-button-box { @@ -1068,7 +1068,7 @@ StScrollBar { .audio-selection-device { border-radius: 16px; } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: #2b2f3a; } + background-color: #303340; } .audio-selection-device:active { background-color: #2777ff; color: #ffffff; } @@ -1119,7 +1119,7 @@ StScrollBar { border-radius: 5px; color: #ffffff; } .nm-dialog-item:hover { - background-color: #2b2f3a; } + background-color: #303340; } .nm-dialog-icon { icon-size: 1.09em; } @@ -1294,7 +1294,7 @@ StScrollBar { transition-duration: 200ms; border-radius: 99px; } .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus { - background-color: #2b2f3a; } + background-color: #303340; } .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { background-color: #d9d9d9; } .screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle { @@ -1307,7 +1307,7 @@ StScrollBar { background-color: #360707; } .screenshot-ui-shot-cast-container { - background-color: #2b2f3a; + background-color: #303340; border-radius: 16px; padding: 3px; spacing: 3px; } @@ -1321,9 +1321,9 @@ StScrollBar { background-color: transparent; border-radius: 13px; } .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { - background-color: #363a48; } - .screenshot-ui-shot-cast-button:active { background-color: #3b3f4e; } + .screenshot-ui-shot-cast-button:active { + background-color: #3f4454; } .screenshot-ui-shot-cast-button:checked { background-color: white; color: black; } @@ -1572,8 +1572,8 @@ StScrollBar { border: 2px solid #2e313d; } .search-entry:hover { - background-color: #363a48; - border-color: #363a48; + background-color: #3b3f4e; + border-color: #3b3f4e; color: rgba(238, 238, 236, 0.7); } .search-entry:focus { @@ -2596,14 +2596,38 @@ $_osd_color: if($variant=='light', black, $fg_color); -slider-handle-radius: 0; } /* Popovers/Menus */ -/* -// menu items +.popup-menu-content, .candidate-popup-content { + padding: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + background-color: #272a34; } + .popup-menu-item { - &.selected, &:active { - background-color: $popover_hover_color; - color: $fg_color; - } -} + border: 1px solid transparent; + border-bottom: 0; + margin-top: 0; + margin-bottom: 0; + padding-top: 8px; + padding-bottom: 8px; } + .popup-menu-item:checked { + border-color: #0d0e11; + background-color: #23252e !important; } + +.popup-sub-menu { + background-color: #23252e; + border: 1px solid #0d0e11; + border-top: 0; } + .popup-sub-menu .popup-menu-item { + padding-top: 7px; + padding-bottom: 7px; } + .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { + background-color: #303340 !important; } + .popup-sub-menu .popup-menu-item:checked { + background-color: #3b3f4e !important; } + .popup-sub-menu .popup-menu-item:active { + background-color: #343845 !important; } + +.popup-separator-menu-item { + margin: 6px 0; } /* Message List */ .message-list .message-list-placeholder, diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 6641b502..53f6820a 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -354,21 +354,21 @@ StScrollBar { .popup-menu-item:rtl { padding-right: 6px; } .popup-menu-item:focus, .popup-menu-item:hover { - background-color: #f7f7f7 !important; } + background-color: #f2f2f2 !important; } .popup-menu-item:focus:active, .popup-menu-item:hover:active { - background-color: #f2f2f2 !important; } + background-color: #ededed !important; } .popup-menu-item:checked { - background-color: #ededed !important; } + background-color: #e8e8e8 !important; } .popup-menu-item:checked { margin-bottom: 0; - box-shadow: inset 0 -1px 0 0 #e0e0e0; + box-shadow: inset 0 -1px 0 0 #dbdbdb; border-radius: 8px 8px 0 0; } .popup-menu-item:checked:focus, .popup-menu-item:checked:hover { - background-color: whitesmoke !important; } + background-color: #f0f0f0 !important; } .popup-menu-item:checked:active { - background-color: #fafafa !important; } + background-color: whitesmoke !important; } .popup-menu-item:active { - background-color: white; + background-color: #fafafa; color: #50555e; } .popup-menu-item:insensitive { color: rgba(92, 97, 108, 0.5); } @@ -387,7 +387,7 @@ StScrollBar { icon-size: 16px !important; } .popup-sub-menu { - background-color: #ededed; + background-color: #e8e8e8; border-radius: 0 0 8px 8px; } .popup-sub-menu .popup-menu-ornament { min-width: 1.09em !important; } @@ -401,7 +401,7 @@ StScrollBar { .popup-sub-menu .popup-menu-item:checked { background-color: white !important; } .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { - background-color: white !important; } + background-color: #fcfcfc !important; } .popup-sub-menu .popup-menu-item:active { background-color: white !important; } .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus { @@ -551,9 +551,9 @@ StScrollBar { margin: 2px; border-radius: 6px; } .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { - background-color: #f7f7f7; } - .calendar .calendar-month-header .pager-button:active { background-color: #f2f2f2; } + .calendar .calendar-month-header .pager-button:active { + background-color: #ededed; } .calendar .calendar-day-base { text-align: center; margin: 2px; @@ -562,16 +562,16 @@ StScrollBar { width: 32px !important; border-radius: 99px; } .calendar .calendar-day-base:hover { - background-color: #f7f7f7; } + background-color: #f2f2f2; } .calendar .calendar-day-base:focus { background-color: #d4e4ff; color: #ffffff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { color: #50555e; - background-color: #f2f2f2; } + background-color: #ededed; } .calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus { - background-color: #cadaf5; } + background-color: #c6d6f1; } .calendar .calendar-day-base.calendar-day-heading { color: #aeb0b6; padding-top: 6px; @@ -849,7 +849,7 @@ StScrollBar { background-color: white; color: #5c616c; } .message-media-control:active { - background-color: white; + background-color: #fafafa; color: #5c616c; } .message-media-control:insensitive { color: #bbbdc2; } @@ -885,7 +885,7 @@ StScrollBar { background-color: #2777ff; color: #ffffff; } .candidate-box:hover { - background-color: #f7f7f7; + background-color: #f2f2f2; color: #50555e; } .candidate-page-button-box { @@ -1068,7 +1068,7 @@ StScrollBar { .audio-selection-device { border-radius: 16px; } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: #f7f7f7; } + background-color: #f2f2f2; } .audio-selection-device:active { background-color: #2777ff; color: #ffffff; } @@ -1119,7 +1119,7 @@ StScrollBar { border-radius: 5px; color: #ffffff; } .nm-dialog-item:hover { - background-color: #f7f7f7; } + background-color: #f2f2f2; } .nm-dialog-icon { icon-size: 1.09em; } @@ -1294,7 +1294,7 @@ StScrollBar { transition-duration: 200ms; border-radius: 99px; } .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus { - background-color: #f7f7f7; } + background-color: #f2f2f2; } .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { background-color: #d9d9d9; } .screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle { @@ -1307,7 +1307,7 @@ StScrollBar { background-color: #360707; } .screenshot-ui-shot-cast-container { - background-color: #f7f7f7; + background-color: #f2f2f2; border-radius: 16px; padding: 3px; spacing: 3px; } @@ -1323,7 +1323,7 @@ StScrollBar { .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { background-color: white; } .screenshot-ui-shot-cast-button:active { - background-color: white; } + background-color: #fafafa; } .screenshot-ui-shot-cast-button:checked { background-color: white; color: black; } @@ -2592,14 +2592,38 @@ $_osd_color: if($variant=='light', black, $fg_color); -slider-handle-radius: 0; } /* Popovers/Menus */ -/* -// menu items +.popup-menu-content, .candidate-popup-content { + padding: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + background-color: #fafafa; } + .popup-menu-item { - &.selected, &:active { - background-color: $popover_hover_color; - color: $fg_color; - } -} + border: 1px solid transparent; + border-bottom: 0; + margin-top: 0; + margin-bottom: 0; + padding-top: 8px; + padding-bottom: 8px; } + .popup-menu-item:checked { + border-color: #d9d9d9; + background-color: #ffffff !important; } + +.popup-sub-menu { + background-color: #ffffff; + border: 1px solid #d9d9d9; + border-top: 0; } + .popup-sub-menu .popup-menu-item { + padding-top: 7px; + padding-bottom: 7px; } + .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { + background-color: #f2f2f2 !important; } + .popup-sub-menu .popup-menu-item:checked { + background-color: #e8e8e8 !important; } + .popup-sub-menu .popup-menu-item:active { + background-color: #ededed !important; } + +.popup-separator-menu-item { + margin: 6px 0; } /* Message List */ .message-list .message-list-placeholder, diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 3e503998..06f83313 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -38,15 +38,43 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* Popovers/Menus */ -/* -// menu items -.popup-menu-item { - &.selected, &:active { - background-color: $popover_hover_color; - color: $fg_color; - } +.popup-menu-content { + padding: 4px; + box-shadow: 0 2px 4px transparentize(black, .8); + background-color: $base_color; } +.popup-menu-item { + border: 1px solid transparent; + border-bottom: 0; + margin-top: 0; + margin-bottom: 0; + padding-top: 8px; + padding-bottom: 8px; + + &:checked { + border-color: $borders_color; + background-color: $bg_color!important; + } +} + +.popup-sub-menu { + background-color: $bg_color; + border: 1px solid $borders_color; + border-top: 0; + + .popup-menu-item { + padding-top: 7px; + padding-bottom: 7px; + + &:focus, &:hover { background-color: $hover_bg_color!important; } + &:checked { background-color: $checked_bg_color!important; } + &:active { background-color: $active_bg_color!important; } + } +} + +.popup-separator-menu-item { margin: 6px 0; } + /* Message List */ .message-list .message-list-placeholder, .message-list-controls { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss index c7c3143a..c4ce9997 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss @@ -36,15 +36,15 @@ $base_border_radius: 8px; $modal_radius: $base_border_radius*2; // 24px // derived hover colors -$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%)); +$hover_bg_color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 4%)); $hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%)); // derived active colors -$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%)); +$active_bg_color: if($variant=='light', darken($base_color, 5%), lighten($base_color, 6%)); $active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%)); // derived checked colors -$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%)); +$checked_bg_color: if($variant=='light', darken($base_color, 7%), lighten($base_color, 9%)); $checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%)); // fonts diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch index 175bbbe3..4865ccc5 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch @@ -1,3 +1,15 @@ +39c39 +< $hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%)); +--- +> $hover_bg_color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 4%)); +43c43 +< $active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%)); +--- +> $active_bg_color: if($variant=='light', darken($base_color, 5%), lighten($base_color, 6%)); +47c47 +< $checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%)); +--- +> $checked_bg_color: if($variant=='light', darken($base_color, 7%), lighten($base_color, 9%)); 51c51 < $base_font_size: 11; --- From f884956ec3a4eed81518cfd1580e12ce55ea85e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 9 Mar 2022 10:18:48 +0100 Subject: [PATCH 24/34] Gnome-Shell: change shadow to notification-banner --- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 4 ++++ share/themes/Kali-Light/gnome-shell/gnome-shell.css | 4 ++++ src/themes/Kali/sass/gnome-shell/_common-tweaks.scss | 5 +++++ 3 files changed, 13 insertions(+) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 63cd614d..c30ab59a 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2638,6 +2638,10 @@ $_osd_color: if($variant=='light', black, $fg_color); spacing: 12px; font-size: 10pt; } +/* Notifications & Message Tray */ +.notification-banner { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } + /* Window Picker */ .window-caption { color: black; diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 53f6820a..b0a6710b 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2634,6 +2634,10 @@ $_osd_color: if($variant=='light', black, $fg_color); spacing: 12px; font-size: 10pt; } +/* Notifications & Message Tray */ +.notification-banner { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } + /* Window Picker */ .window-caption { color: black; diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 06f83313..e8d95aa9 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -86,6 +86,11 @@ $_osd_color: if($variant=='light', black, $fg_color); @include fontsize(10); } +/* Notifications & Message Tray */ +.notification-banner { + box-shadow: 0 2px 4px transparentize(black, .8); +} + /* Window Picker */ // Window titles .window-caption { From 682ce6ec3d6ec2a58a1c73bf2865ba2ed92e6a0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 9 Mar 2022 12:02:30 +0100 Subject: [PATCH 25/34] Gnome-Shell: change bg colors of buttons and cards --- .../Kali-Dark/gnome-shell/gnome-shell.css | 274 +++++++++++------- .../Kali-Light/gnome-shell/gnome-shell.css | 236 ++++++++++----- .../Kali/sass/gnome-shell/_common-tweaks.scss | 2 - .../upstream/gnome-shell-sass/_drawing.scss | 25 +- .../gnome-shell-sass/_drawing.scss.patch | 41 +++ 5 files changed, 392 insertions(+), 186 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index c30ab59a..5a3e78e3 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -54,70 +54,90 @@ stage { border-width: 1px; font-weight: bold; padding: 3px 24px; + border: 1px solid transparent; color: #eeeeec; - background-color: #2d2f38; } + background-color: #2e313d; + border-color: #1a1c23; } #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { + border: 1px solid transparent; color: #eeeeec; - background-color: #2c364c; + background-color: #2d3850; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover { - background-color: #333d54; + background-color: #333e58; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active { - background-color: #39435b; + background-color: #394560; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { + border: 1px solid transparent; color: #eeeeec; - background-color: #343640; } + background-color: #333742; + border-color: #1a1c23; } #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { + border: 1px solid transparent; color: rgba(238, 238, 236, 0.5); - background-color: rgba(238, 238, 236, 0.05); } + background-color: rgba(238, 238, 236, 0.05); + border-color: #0d0e11; } #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { + border: 1px solid transparent; color: #eeeeec; - background-color: #3b3d49; } + background-color: #393c47; + border-color: #0b0b0e; } #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked { + border: 1px solid transparent; color: #eeeeec; - background-color: #414451; } + background-color: #3f424d; } #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover { - background-color: #484b5a; } + background-color: #484d60; } #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active { - background-color: #4f5362; } + background-color: #4e5468; } .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { padding: 12px; font-weight: bold !important; + border: 1px solid transparent; color: #eeeeec; - background-color: #3b3f4b; } + background-color: #3d4251; + border-color: #292c37; } .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr { margin-right: 1px; } .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl { margin-left: 1px; } .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { + border: 1px solid transparent; color: rgba(238, 238, 236, 0.5); - background-color: rgba(238, 238, 236, 0.05); } + background-color: rgba(238, 238, 236, 0.05); + border-color: #0d0e11; } .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { + border: 1px solid transparent; color: #eeeeec; - background-color: #39455d; + background-color: #3b4763; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover { - background-color: #3f4b65; + background-color: #414d6a; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active { - background-color: #45526c; + background-color: #465472; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { + border: 1px solid transparent; color: #eeeeec; - background-color: #424654; } + background-color: #424756; + border-color: #292c37; } .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { + border: 1px solid transparent; color: #eeeeec; - background-color: #484d5c; } + background-color: #474c5a; + border-color: #1a1c23; } .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked { + border: 1px solid transparent; color: #eeeeec; - background-color: #4f5565; } + background-color: #4d515f; } .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover { - background-color: #565c6d; } + background-color: #575e74; } .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active { - background-color: #5d6376; } + background-color: #5e657d; } .modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr { border-radius: 0 0 0 10px; } .modal-dialog .modal-dialog-linked-button:last-child:ltr, .hotplug-notification-item:last-child:ltr, .notification-banner .notification-button:last-child:ltr { @@ -134,42 +154,56 @@ stage { margin-right: 0 !important; } .screenshot-ui-show-pointer-button, .screenshot-ui-type-button { + border: 1px solid transparent; background-color: transparent; - background-color: none; } + background-color: none; + border-color: transparent; } .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { + border: 1px solid transparent; color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); + border-color: #0d0e11; background-color: transparent; } .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { + border: 1px solid transparent; background-color: transparent; - background-color: none; } + background-color: none; + border-color: transparent; } .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive { + border: 1px solid transparent; color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); + border-color: #0d0e11; background-color: transparent; } .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { + border: 1px solid transparent; color: #eeeeec; - background-color: #37435a; + background-color: #394560; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover { - background-color: #3d4962; + background-color: #3f4b68; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active { - background-color: #43506a; + background-color: #455170; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover { + border: 1px solid transparent; color: #eeeeec; - background-color: #404451; } + background-color: #404453; + border-color: #272a34; } .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { + border: 1px solid transparent; color: #eeeeec; - background-color: #474b59; } + background-color: #454a58; + border-color: #181a20; } .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked { + border: 1px solid transparent; color: #eeeeec; - background-color: #4d5362; } + background-color: #4b4f5c; } .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover { - background-color: #545a6a; } + background-color: #555b71; } .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:checked:active, .screenshot-ui-type-button:checked:active { - background-color: #5b6173; } + background-color: #5b627a; } /* General Typography */ .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { @@ -484,60 +518,82 @@ StScrollBar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; background-color: transparent; background-color: none; + border-color: transparent; box-shadow: none !important; padding: 9px; } .datemenu-today-button:insensitive { + border: 1px solid transparent; color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); + border-color: #0d0e11; background-color: transparent; } + .datemenu-today-button:insensitive { + border-color: transparent; } .datemenu-today-button:focus { + border: 1px solid transparent; color: #eeeeec; - background-color: #2c364c; + background-color: #2d3850; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .datemenu-today-button:focus:hover { - background-color: #333d54; + background-color: #333e58; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .datemenu-today-button:focus:active { - background-color: #39435b; + background-color: #394560; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .datemenu-today-button:hover { + border: 1px solid transparent; color: #eeeeec; - background-color: #343640; } + background-color: #333742; + border-color: #1a1c23; } .datemenu-today-button:active { + border: 1px solid transparent; color: #eeeeec; - background-color: #3b3d49; } + background-color: #393c47; + border-color: #0b0b0e; } /* Calendar */ .calendar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; background-color: transparent; background-color: none; + border-color: transparent; box-shadow: none !important; margin-top: 0; } .calendar:insensitive { + border: 1px solid transparent; color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); + border-color: #0d0e11; background-color: transparent; } + .calendar:insensitive { + border-color: transparent; } .calendar:focus { + border: 1px solid transparent; color: #eeeeec; - background-color: #2c364c; + background-color: #2d3850; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .calendar:focus:hover { - background-color: #333d54; + background-color: #333e58; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .calendar:focus:active { - background-color: #39435b; + background-color: #394560; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .calendar:hover { + border: 1px solid transparent; color: #eeeeec; - background-color: #343640; } + background-color: #333742; + border-color: #1a1c23; } .calendar:active { + border: 1px solid transparent; color: #eeeeec; - background-color: #3b3d49; } + background-color: #393c47; + border-color: #0b0b0e; } .calendar .calendar-month-header .calendar-change-month-back StIcon, .calendar .calendar-month-header .calendar-change-month-forward StIcon { icon-size: 1.09em; } @@ -614,25 +670,32 @@ StScrollBar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; color: #eeeeec; - background-color: #2d2f38; + background-color: #2e313d; + border-color: #1a1c23; padding: 12px; } .events-button:focus { + border: 1px solid transparent; color: #eeeeec; - background-color: #2c364c; + background-color: #2d3850; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .events-button:focus:hover { - background-color: #333d54; + background-color: #333e58; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .events-button:focus:active { - background-color: #39435b; + background-color: #394560; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .events-button:hover { + border: 1px solid transparent; color: #eeeeec; - background-color: #343640; } + background-color: #333742; + border-color: #1a1c23; } .events-button:active { + border: 1px solid transparent; color: #eeeeec; - background-color: #3b3d49; } + background-color: #393c47; + border-color: #0b0b0e; } .events-button .events-box { spacing: 6px; } .events-button .events-list { @@ -648,25 +711,32 @@ StScrollBar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; color: #eeeeec; - background-color: #2d2f38; + background-color: #2e313d; + border-color: #1a1c23; padding: 12px; } .world-clocks-button:focus { + border: 1px solid transparent; color: #eeeeec; - background-color: #2c364c; + background-color: #2d3850; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .world-clocks-button:focus:hover { - background-color: #333d54; + background-color: #333e58; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .world-clocks-button:focus:active { - background-color: #39435b; + background-color: #394560; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .world-clocks-button:hover { + border: 1px solid transparent; color: #eeeeec; - background-color: #343640; } + background-color: #333742; + border-color: #1a1c23; } .world-clocks-button:active { + border: 1px solid transparent; color: #eeeeec; - background-color: #3b3d49; } + background-color: #393c47; + border-color: #0b0b0e; } .world-clocks-button .world-clocks-grid { spacing-rows: 6px; spacing-columns: 12px; } @@ -688,25 +758,32 @@ StScrollBar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; color: #eeeeec; - background-color: #2d2f38; + background-color: #2e313d; + border-color: #1a1c23; padding: 12px; } .weather-button:focus { + border: 1px solid transparent; color: #eeeeec; - background-color: #2c364c; + background-color: #2d3850; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .weather-button:focus:hover { - background-color: #333d54; + background-color: #333e58; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .weather-button:focus:active { - background-color: #39435b; + background-color: #394560; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .weather-button:hover { + border: 1px solid transparent; color: #eeeeec; - background-color: #343640; } + background-color: #333742; + border-color: #1a1c23; } .weather-button:active { + border: 1px solid transparent; color: #eeeeec; - background-color: #3b3d49; } + background-color: #393c47; + border-color: #0b0b0e; } .weather-button .weather-box { spacing: 10px; } .weather-button .weather-header-box { @@ -774,24 +851,31 @@ StScrollBar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; color: #eeeeec; - background-color: #2d2f38; } + background-color: #2e313d; + border-color: #1a1c23; } .message:focus { + border: 1px solid transparent; color: #eeeeec; - background-color: #2c364c; + background-color: #2d3850; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .message:focus:hover { - background-color: #333d54; + background-color: #333e58; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .message:focus:active { - background-color: #39435b; + background-color: #394560; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .message:hover { + border: 1px solid transparent; color: #eeeeec; - background-color: #343640; } + background-color: #333742; + border-color: #1a1c23; } .message:active { + border: 1px solid transparent; color: #eeeeec; - background-color: #3b3d49; } + background-color: #393c47; + border-color: #0b0b0e; } .message .message-icon-bin { padding: 18px; } .message .message-icon-bin:ltr { @@ -2236,24 +2320,31 @@ StScrollBar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; color: #eeeeec; - background-color: #2d2f38; } + background-color: #2e313d; + border-color: #1a1c23; } .lg-extension:focus { + border: 1px solid transparent; color: #eeeeec; - background-color: #2c364c; + background-color: #2d3850; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .lg-extension:focus:hover { - background-color: #333d54; + background-color: #333e58; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .lg-extension:focus:active { - background-color: #39435b; + background-color: #394560; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .lg-extension:hover { + border: 1px solid transparent; color: #eeeeec; - background-color: #343640; } + background-color: #333742; + border-color: #1a1c23; } .lg-extension:active { + border: 1px solid transparent; color: #eeeeec; - background-color: #3b3d49; } + background-color: #393c47; + border-color: #0b0b0e; } .lg-extension-meta { spacing: 6px; } @@ -2308,13 +2399,16 @@ StScrollBar { border-color: #1c1e25; } .login-dialog .modal-dialog-button:insensitive, .unlock-dialog .modal-dialog-button:insensitive { + border: 1px solid transparent; color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); + border-color: #0d0e11; border-color: #1c1e25; background-color: #1c1e25; color: rgba(255, 255, 255, 0.7); } .login-dialog .modal-dialog-button:default, .unlock-dialog .modal-dialog-button:default { + border: 1px solid transparent; background-color: #2777ff; color: #ffffff; } .login-dialog .modal-dialog-button:default:focus, @@ -2323,7 +2417,7 @@ StScrollBar { .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, .unlock-dialog .modal-dialog-button:default:hover, .unlock-dialog .modal-dialog-button:default:focus { - background-color: #4187ff; + background-color: #317dfe; color: white; } .login-dialog .modal-dialog-button:default:active, .unlock-dialog .modal-dialog-button:default:active { @@ -2331,8 +2425,10 @@ StScrollBar { color: #ededed; } .login-dialog .modal-dialog-button:default:insensitive, .unlock-dialog .modal-dialog-button:default:insensitive { + border: 1px solid transparent; color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); + border-color: #0d0e11; background-color: rgba(39, 119, 255, 0.5); color: rgba(255, 255, 255, 0.5); } .login-dialog .cancel-button, @@ -2699,34 +2795,14 @@ $_osd_color: if($variant=='light', black, $fg_color); background-image: url("assets/view-grid-symbolic-dark.svg"); } /* Date/Time Menu */ -.datemenu-today-button { - border-radius: 8px; - margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - color: #eeeeec; - background-color: #2d2f38; } - .datemenu-today-button:focus { - color: #eeeeec; - background-color: #2c364c; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .datemenu-today-button:focus:hover { - background-color: #333d54; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .datemenu-today-button:focus:active { - background-color: #39435b; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .datemenu-today-button:hover { - color: #eeeeec; - background-color: #343640; } - .datemenu-today-button:active { - color: #eeeeec; - background-color: #3b3d49; } - .datemenu-today-button:insensitive { - color: inherit; } - .datemenu-today-button .day-label { - font-weight: normal; } - .datemenu-today-button .date-label { - font-weight: lighter; } +.datemenu-today-button:insensitive { + color: inherit; } + +.datemenu-today-button .day-label { + font-weight: normal; } + +.datemenu-today-button .date-label { + font-weight: lighter; } /* Search */ .search-entry { diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index b0a6710b..5b227e3f 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -54,11 +54,14 @@ stage { border-width: 1px; font-weight: bold; padding: 3px 24px; + border: 1px solid transparent; color: #5c616c; - background-color: #f7f7f8; } + background-color: white; + border-color: #d1d1d1; } #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { + border: 1px solid transparent; color: #5c616c; - background-color: #e2eaf9; + background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover { background-color: #e9f1ff; @@ -67,17 +70,24 @@ stage { background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #fafafb; + border-color: #d1d1d1; } #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { + border: 1px solid transparent; color: rgba(92, 97, 108, 0.5); - background-color: rgba(92, 97, 108, 0.05); } + background-color: rgba(92, 97, 108, 0.05); + border-color: #d9d9d9; } #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #f5f6f6; + border-color: #d1d1d1; } #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #f0f1f2; } #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover { background-color: white; } #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active { @@ -86,36 +96,46 @@ stage { .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { padding: 12px; font-weight: bold !important; + border: 1px solid transparent; color: #5c616c; - background-color: #dadadb; } + background-color: #ededed; + border-color: #b3b3b3; } .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr { margin-right: 1px; } .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl { margin-left: 1px; } .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { + border: 1px solid transparent; color: rgba(92, 97, 108, 0.5); - background-color: rgba(92, 97, 108, 0.05); } + background-color: rgba(92, 97, 108, 0.05); + border-color: #d9d9d9; } .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { + border: 1px solid transparent; color: #5c616c; - background-color: #c8d0df; + background-color: #d9e1ef; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover { - background-color: #cfd7e5; + background-color: #e0e8f6; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active { - background-color: #d6deec; + background-color: #e7effd; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { + border: 1px solid transparent; color: #5c616c; - background-color: #e2e2e3; } + background-color: #e9e9e9; + border-color: #c4c4c4; } .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { + border: 1px solid transparent; color: #5c616c; - background-color: #eaeaea; } + background-color: #e4e5e5; + border-color: #b3b3b3; } .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked { + border: 1px solid transparent; color: #5c616c; - background-color: #f1f1f2; } + background-color: #e0e1e2; } .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover { - background-color: #f9f9f9; } + background-color: white; } .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active { background-color: white; } .modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr { @@ -134,42 +154,56 @@ stage { margin-right: 0 !important; } .screenshot-ui-show-pointer-button, .screenshot-ui-type-button { + border: 1px solid transparent; background-color: transparent; - background-color: none; } + background-color: none; + border-color: transparent; } .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { + border: 1px solid transparent; color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); + border-color: #d9d9d9; background-color: transparent; } .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { + border: 1px solid transparent; background-color: transparent; - background-color: none; } + background-color: none; + border-color: transparent; } .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive { + border: 1px solid transparent; color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); + border-color: #d9d9d9; background-color: transparent; } .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { + border: 1px solid transparent; color: #5c616c; - background-color: #313d55; + background-color: #394560; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover { - background-color: #37435d; + background-color: #3f4b68; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active { - background-color: #3d4965; + background-color: #455170; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover { + border: 1px solid transparent; color: #5c616c; - background-color: #393d4b; } + background-color: #3c404f; + border-color: #181a20; } .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { + border: 1px solid transparent; color: #5c616c; - background-color: #3f4453; } + background-color: #3d4150; + border-color: #08090b; } .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked { + border: 1px solid transparent; color: #5c616c; - background-color: #464b5c; } + background-color: #3e4251; } .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover { - background-color: #4c5265; } + background-color: #555b71; } .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:checked:active, .screenshot-ui-type-button:checked:active { - background-color: #535a6e; } + background-color: #5b627a; } /* General Typography */ .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { @@ -484,17 +518,24 @@ StScrollBar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; background-color: transparent; background-color: none; + border-color: transparent; box-shadow: none !important; padding: 9px; } .datemenu-today-button:insensitive { + border: 1px solid transparent; color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); + border-color: #d9d9d9; background-color: transparent; } + .datemenu-today-button:insensitive { + border-color: transparent; } .datemenu-today-button:focus { + border: 1px solid transparent; color: #5c616c; - background-color: #e2eaf9; + background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .datemenu-today-button:focus:hover { background-color: #e9f1ff; @@ -503,28 +544,39 @@ StScrollBar { background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .datemenu-today-button:hover { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #fafafb; + border-color: #d1d1d1; } .datemenu-today-button:active { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #f5f6f6; + border-color: #d1d1d1; } /* Calendar */ .calendar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; background-color: transparent; background-color: none; + border-color: transparent; box-shadow: none !important; margin-top: 0; } .calendar:insensitive { + border: 1px solid transparent; color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); + border-color: #d9d9d9; background-color: transparent; } + .calendar:insensitive { + border-color: transparent; } .calendar:focus { + border: 1px solid transparent; color: #5c616c; - background-color: #e2eaf9; + background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .calendar:focus:hover { background-color: #e9f1ff; @@ -533,11 +585,15 @@ StScrollBar { background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .calendar:hover { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #fafafb; + border-color: #d1d1d1; } .calendar:active { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #f5f6f6; + border-color: #d1d1d1; } .calendar .calendar-month-header .calendar-change-month-back StIcon, .calendar .calendar-month-header .calendar-change-month-forward StIcon { icon-size: 1.09em; } @@ -614,12 +670,15 @@ StScrollBar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; color: #5c616c; - background-color: #f7f7f8; + background-color: white; + border-color: #d1d1d1; padding: 12px; } .events-button:focus { + border: 1px solid transparent; color: #5c616c; - background-color: #e2eaf9; + background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .events-button:focus:hover { background-color: #e9f1ff; @@ -628,11 +687,15 @@ StScrollBar { background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .events-button:hover { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #fafafb; + border-color: #d1d1d1; } .events-button:active { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #f5f6f6; + border-color: #d1d1d1; } .events-button .events-box { spacing: 6px; } .events-button .events-list { @@ -648,12 +711,15 @@ StScrollBar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; color: #5c616c; - background-color: #f7f7f8; + background-color: white; + border-color: #d1d1d1; padding: 12px; } .world-clocks-button:focus { + border: 1px solid transparent; color: #5c616c; - background-color: #e2eaf9; + background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .world-clocks-button:focus:hover { background-color: #e9f1ff; @@ -662,11 +728,15 @@ StScrollBar { background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .world-clocks-button:hover { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #fafafb; + border-color: #d1d1d1; } .world-clocks-button:active { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #f5f6f6; + border-color: #d1d1d1; } .world-clocks-button .world-clocks-grid { spacing-rows: 6px; spacing-columns: 12px; } @@ -688,12 +758,15 @@ StScrollBar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; color: #5c616c; - background-color: #f7f7f8; + background-color: white; + border-color: #d1d1d1; padding: 12px; } .weather-button:focus { + border: 1px solid transparent; color: #5c616c; - background-color: #e2eaf9; + background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .weather-button:focus:hover { background-color: #e9f1ff; @@ -702,11 +775,15 @@ StScrollBar { background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .weather-button:hover { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #fafafb; + border-color: #d1d1d1; } .weather-button:active { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #f5f6f6; + border-color: #d1d1d1; } .weather-button .weather-box { spacing: 10px; } .weather-button .weather-header-box { @@ -774,11 +851,14 @@ StScrollBar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; color: #5c616c; - background-color: #f7f7f8; } + background-color: white; + border-color: #d1d1d1; } .message:focus { + border: 1px solid transparent; color: #5c616c; - background-color: #e2eaf9; + background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .message:focus:hover { background-color: #e9f1ff; @@ -787,11 +867,15 @@ StScrollBar { background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .message:hover { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #fafafb; + border-color: #d1d1d1; } .message:active { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #f5f6f6; + border-color: #d1d1d1; } .message .message-icon-bin { padding: 18px; } .message .message-icon-bin:ltr { @@ -2236,11 +2320,14 @@ StScrollBar { border-radius: 8px; margin: 4px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + border: 1px solid transparent; color: #5c616c; - background-color: #f7f7f8; } + background-color: white; + border-color: #d1d1d1; } .lg-extension:focus { + border: 1px solid transparent; color: #5c616c; - background-color: #e2eaf9; + background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .lg-extension:focus:hover { background-color: #e9f1ff; @@ -2249,11 +2336,15 @@ StScrollBar { background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .lg-extension:hover { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #fafafb; + border-color: #d1d1d1; } .lg-extension:active { + border: 1px solid transparent; color: #5c616c; - background-color: white; } + background-color: #f5f6f6; + border-color: #d1d1d1; } .lg-extension-meta { spacing: 6px; } @@ -2308,13 +2399,16 @@ StScrollBar { border-color: #1c1e25; } .login-dialog .modal-dialog-button:insensitive, .unlock-dialog .modal-dialog-button:insensitive { + border: 1px solid transparent; color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); + border-color: #d9d9d9; border-color: #1c1e25; background-color: #1c1e25; color: rgba(255, 255, 255, 0.7); } .login-dialog .modal-dialog-button:default, .unlock-dialog .modal-dialog-button:default { + border: 1px solid transparent; background-color: #2777ff; color: #ffffff; } .login-dialog .modal-dialog-button:default:focus, @@ -2323,7 +2417,7 @@ StScrollBar { .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, .unlock-dialog .modal-dialog-button:default:hover, .unlock-dialog .modal-dialog-button:default:focus { - background-color: #4187ff; + background-color: #2a76f8; color: white; } .login-dialog .modal-dialog-button:default:active, .unlock-dialog .modal-dialog-button:default:active { @@ -2331,8 +2425,10 @@ StScrollBar { color: #ededed; } .login-dialog .modal-dialog-button:default:insensitive, .unlock-dialog .modal-dialog-button:default:insensitive { + border: 1px solid transparent; color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); + border-color: #d9d9d9; background-color: rgba(39, 119, 255, 0.5); color: rgba(255, 255, 255, 0.5); } .login-dialog .cancel-button, @@ -2695,34 +2791,14 @@ $_osd_color: if($variant=='light', black, $fg_color); background-image: url("assets/view-grid-symbolic-dark.svg"); } /* Date/Time Menu */ -.datemenu-today-button { - border-radius: 8px; - margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - color: #5c616c; - background-color: #f7f7f8; } - .datemenu-today-button:focus { - color: #5c616c; - background-color: #e2eaf9; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .datemenu-today-button:focus:hover { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .datemenu-today-button:focus:active { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } - .datemenu-today-button:hover { - color: #5c616c; - background-color: white; } - .datemenu-today-button:active { - color: #5c616c; - background-color: white; } - .datemenu-today-button:insensitive { - color: inherit; } - .datemenu-today-button .day-label { - font-weight: normal; } - .datemenu-today-button .date-label { - font-weight: lighter; } +.datemenu-today-button:insensitive { + color: inherit; } + +.datemenu-today-button .day-label { + font-weight: normal; } + +.datemenu-today-button .date-label { + font-weight: lighter; } /* Search */ .search-entry { diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index e8d95aa9..bb61e88c 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -182,8 +182,6 @@ $_osd_color: if($variant=='light', black, $fg_color); /* Date/Time Menu */ .datemenu-today-button { - @include card($flat: false); - &:insensitive { color: inherit; } .day-label { font-weight: normal; } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss index 9fe5eb8c..c357f2ca 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss @@ -130,12 +130,19 @@ } +@function draw_border_color ($c) { + // + // colored buttons want the border form the base color + // + @return if($variant == 'light', darken($c, 18%), darken($c, 4%)); +} + // buttons // since buttons are all flat an borderless now the mixin is simpler @mixin button($t, $tc:$fg_color, $c:$bg_color) { -$button_bg_color: mix($tc, $c, 5%); +$button_bg_color: lighten($c, 5%); // // Button drawing function // @@ -149,10 +156,13 @@ $button_bg_color: mix($tc, $c, 5%); // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // + border: 1px solid transparent; + // normal button @if $t==normal { color: $tc; background-color: $button_bg_color; + border-color: draw_border_color($c); } // focused button @@ -173,19 +183,21 @@ $button_bg_color: mix($tc, $c, 5%); // hover button @else if $t==hover { color: $tc; - background-color: lighten($button_bg_color, 3%); + background-color: mix($tc, $button_bg_color, 3%); + border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c)); } // active button @else if $t==active { color: $tc; - background-color: lighten($button_bg_color, 6%); + background-color: mix($tc, $button_bg_color, 6%); + border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%))); } // checked button @else if $t==checked { color: $tc; - background-color: lighten($button_bg_color, 9%); + background-color: mix($tc, $button_bg_color, 9%); &:hover { background-color: lighten($button_bg_color, 12%);} &:active { background-color: lighten($button_bg_color, 15%);} } @@ -194,6 +206,7 @@ $button_bg_color: mix($tc, $c, 5%); @else if $t==insensitive { color: transparentize($tc, 0.5); background-color: transparentize($tc, .95); + border-color: $insensitive_borders_color; } // default/suggested button @@ -204,7 +217,7 @@ $button_bg_color: mix($tc, $c, 5%); box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4); } &:hover, &:focus { - background-color: lighten($selected_bg_color, 5%); + background-color: mix($tc, $selected_bg_color, 5%); color: lighten($selected_fg_color, 5%); } &:active { @@ -222,6 +235,7 @@ $button_bg_color: mix($tc, $c, 5%); @else if $t==undecorated { background-color: transparent; background-color: none; + border-color: transparent; &:insensitive { @include button(insensitive); background-color: transparent; @@ -294,6 +308,7 @@ $button_bg_color: mix($tc, $c, 5%); @if $flat { @include button(undecorated); box-shadow: none !important; + &:insensitive { border-color: transparent; } } @else { @include button(normal); } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch index a52d04b6..6c1b7b98 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch @@ -1,4 +1,45 @@ +132a133,139 +> @function draw_border_color ($c) { +> // +> // colored buttons want the border form the base color +> // +> @return if($variant == 'light', darken($c, 18%), darken($c, 4%)); +> } +> +138c145 +< $button_bg_color: mix($tc, $c, 5%); +--- +> $button_bg_color: lighten($c, 5%); +151a159,160 +> border: 1px solid transparent; +> +155a165 +> border-color: draw_border_color($c); +176c186,187 +< background-color: lighten($button_bg_color, 3%); +--- +> background-color: mix($tc, $button_bg_color, 3%); +> border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c)); +182c193,194 +< background-color: lighten($button_bg_color, 6%); +--- +> background-color: mix($tc, $button_bg_color, 6%); +> border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%))); +188c200 +< background-color: lighten($button_bg_color, 9%); +--- +> background-color: mix($tc, $button_bg_color, 9%); +196a209 +> border-color: $insensitive_borders_color; +207c220 +< background-color: lighten($selected_bg_color, 5%); +--- +> background-color: mix($tc, $selected_bg_color, 5%); +224a238 +> border-color: transparent; 228c228 < color: transparentize($selected_fg_color, .5); --- > //color: transparentize($selected_fg_color, .5); +296a311 +> &:insensitive { border-color: transparent; } From 1a2c2effbf0c376dc719833bf4a61432f589fcdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 9 Mar 2022 14:55:23 +0100 Subject: [PATCH 26/34] Gnome-Shell: tweak notifications in calendar panel --- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 10 ++++++++++ share/themes/Kali-Light/gnome-shell/gnome-shell.css | 10 ++++++++++ src/themes/Kali/sass/gnome-shell/_common-tweaks.scss | 9 +++++++++ 3 files changed, 29 insertions(+) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 5a3e78e3..89904cb9 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2734,6 +2734,16 @@ $_osd_color: if($variant=='light', black, $fg_color); spacing: 12px; font-size: 10pt; } +.message .message-content { + padding: 6px; + spacing: 0; } + +.message .message-title { + padding-top: .5em; } + +.message .message-secondary-bin > .event-time { + padding-bottom: .5em; } + /* Notifications & Message Tray */ .notification-banner { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 5b227e3f..a747e320 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2730,6 +2730,16 @@ $_osd_color: if($variant=='light', black, $fg_color); spacing: 12px; font-size: 10pt; } +.message .message-content { + padding: 6px; + spacing: 0; } + +.message .message-title { + padding-top: .5em; } + +.message .message-secondary-bin > .event-time { + padding-bottom: .5em; } + /* Notifications & Message Tray */ .notification-banner { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index bb61e88c..a6b95480 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -86,6 +86,15 @@ $_osd_color: if($variant=='light', black, $fg_color); @include fontsize(10); } +.message { + .message-content { + padding: $base_padding; + spacing: 0; + } + .message-title { padding-top: .5em; } + .message-secondary-bin > .event-time { padding-bottom: .5em; } +} + /* Notifications & Message Tray */ .notification-banner { box-shadow: 0 2px 4px transparentize(black, .8); From ce63319b99a556671f56d58bb2bd2a61c32a6308 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Thu, 10 Mar 2022 18:35:46 +0100 Subject: [PATCH 27/34] Gnome-Shell: lighten icon shadow --- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 3 +++ share/themes/Kali-Light/gnome-shell/gnome-shell.css | 3 +++ src/themes/Kali/sass/gnome-shell/_common-tweaks.scss | 5 +++++ 3 files changed, 11 insertions(+) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 89904cb9..8eec61d1 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2657,6 +2657,9 @@ StScrollBar { #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { background-color: rgba(39, 119, 255, 0.5); } +.icon-dropshadow { + icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); } + /* OSD */ /* $_osd_color: if($variant=='light', black, $fg_color); diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index a747e320..f5505db5 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2653,6 +2653,9 @@ StScrollBar { #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { background-color: rgba(39, 119, 255, 0.5); } +.icon-dropshadow { + icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); } + /* OSD */ /* $_osd_color: if($variant=='light', black, $fg_color); diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index a6b95480..d9e868c5 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -1,6 +1,11 @@ $overview_transparent_bg: transparentize(white, .9); $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); +// Dropshadow for large icons +.icon-dropshadow { + icon-shadow: 0 1px 5px $shadow_color; +} + /* OSD */ /* $_osd_color: if($variant=='light', black, $fg_color); From f541fcf0a055550d8ded97411eac5f7c2f56879a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Thu, 10 Mar 2022 19:09:02 +0100 Subject: [PATCH 28/34] Gnome-Shell: update osd theme tweaks --- .../Kali/sass/gnome-shell/_common-tweaks.scss | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index d9e868c5..2d4e7d02 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -7,26 +7,9 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); } /* OSD */ -/* -$_osd_color: if($variant=='light', black, $fg_color); %osd_panel { - font-weight: bold; - background-color: $bg_color; - color: $fg_color; - border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color); + background-color: transparentize($osd_bg_color, 0.04); box-shadow: 0 4px 10px transparentize(black, .8); - - StIcon { - color: $_osd_color; - icon-shadow: 0 0 6px transparentize(black, .6); - } -} - -.osd-window { - .level { - -barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9)); - -barlevel-active-background-color: $_osd_color; - } } /* Switches */ From 48c9290e05147334f0229e99657269fb21baa456 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Fri, 11 Mar 2022 18:21:13 +0100 Subject: [PATCH 29/34] Gnome-Shell: theme screenshot dialog --- .../Kali-Dark/gnome-shell/gnome-shell.css | 89 ++++++++++++++----- .../Kali-Light/gnome-shell/gnome-shell.css | 89 ++++++++++++++----- .../Kali/sass/gnome-shell/_common-tweaks.scss | 24 +++++ 3 files changed, 162 insertions(+), 40 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 8eec61d1..4dc4f2ae 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2661,27 +2661,62 @@ StScrollBar { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); } /* OSD */ -/* -$_osd_color: if($variant=='light', black, $fg_color); -%osd_panel { - font-weight: bold; - background-color: $bg_color; - color: $fg_color; - border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color); - box-shadow: 0 4px 10px transparentize(black, .8); +.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel { + background-color: rgba(48, 51, 64, 0.96); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } - StIcon { - color: $_osd_color; - icon-shadow: 0 0 6px transparentize(black, .6); - } -} - -.osd-window { - .level { - -barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9)); - -barlevel-active-background-color: $_osd_color; - } -} +.screenshot-ui-type-button, .screenshot-ui-show-pointer-button { + border: 1px solid transparent; + background-color: transparent; + background-color: none; + border-color: transparent; + border: 0 !important; } + .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive { + border: 1px solid transparent; + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + border-color: #0d0e11; + background-color: transparent; } + .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive { + border: 1px solid transparent; + background-color: transparent; + background-color: none; + border-color: transparent; } + .screenshot-ui-type-button:insensitive:insensitive, .screenshot-ui-show-pointer-button:insensitive:insensitive { + border: 1px solid transparent; + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + border-color: #0d0e11; + background-color: transparent; } + .screenshot-ui-type-button:focus, .screenshot-ui-show-pointer-button:focus { + border: 1px solid transparent; + color: white; + background-color: #394560; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .screenshot-ui-type-button:focus:hover, .screenshot-ui-show-pointer-button:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-type-button:focus:active, .screenshot-ui-show-pointer-button:focus:active { + background-color: #455170; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-type-button:hover, .screenshot-ui-show-pointer-button:hover { + border: 1px solid transparent; + color: white; + background-color: #414554; + border-color: #272a34; } + .screenshot-ui-type-button:active, .screenshot-ui-show-pointer-button:active { + border: 1px solid transparent; + color: white; + background-color: #464b59; + border-color: #181a20; } + .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:checked, .screenshot-ui-show-pointer-button:checked { + border: 1px solid transparent; + color: white; + background-color: #4c505e; } + .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:checked:hover, .screenshot-ui-show-pointer-button:checked:hover { + background-color: #555b71; } + .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:checked:active, .screenshot-ui-show-pointer-button:checked:active { + background-color: #5b627a; } /* Switches */ .toggle-switch { @@ -2775,6 +2810,20 @@ $_osd_color: if($variant=='light', black, $fg_color); color: transparent; transition-duration: 0s; } +/* Screenshot UI */ +.screenshot-ui-shot-cast-container { + background-color: #383d4b; } + +.screenshot-ui-shot-cast-button { + background-color: transparent; } + .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { + background-color: #464b5d; } + .screenshot-ui-shot-cast-button:active { + background-color: #51576b; } + .screenshot-ui-shot-cast-button:checked { + background-color: white; + color: black; } + /* Top Bar */ #panel { background: rgba(35, 37, 46, 0.8); diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index f5505db5..193f144d 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2657,27 +2657,62 @@ StScrollBar { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); } /* OSD */ -/* -$_osd_color: if($variant=='light', black, $fg_color); -%osd_panel { - font-weight: bold; - background-color: $bg_color; - color: $fg_color; - border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color); - box-shadow: 0 4px 10px transparentize(black, .8); +.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel { + background-color: rgba(48, 51, 64, 0.96); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } - StIcon { - color: $_osd_color; - icon-shadow: 0 0 6px transparentize(black, .6); - } -} - -.osd-window { - .level { - -barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9)); - -barlevel-active-background-color: $_osd_color; - } -} +.screenshot-ui-type-button, .screenshot-ui-show-pointer-button { + border: 1px solid transparent; + background-color: transparent; + background-color: none; + border-color: transparent; + border: 0 !important; } + .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive { + border: 1px solid transparent; + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + border-color: #d9d9d9; + background-color: transparent; } + .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive { + border: 1px solid transparent; + background-color: transparent; + background-color: none; + border-color: transparent; } + .screenshot-ui-type-button:insensitive:insensitive, .screenshot-ui-show-pointer-button:insensitive:insensitive { + border: 1px solid transparent; + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + border-color: #d9d9d9; + background-color: transparent; } + .screenshot-ui-type-button:focus, .screenshot-ui-show-pointer-button:focus { + border: 1px solid transparent; + color: white; + background-color: #394560; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .screenshot-ui-type-button:focus:hover, .screenshot-ui-show-pointer-button:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-type-button:focus:active, .screenshot-ui-show-pointer-button:focus:active { + background-color: #455170; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-type-button:hover, .screenshot-ui-show-pointer-button:hover { + border: 1px solid transparent; + color: white; + background-color: #414554; + border-color: #181a20; } + .screenshot-ui-type-button:active, .screenshot-ui-show-pointer-button:active { + border: 1px solid transparent; + color: white; + background-color: #464b59; + border-color: #08090b; } + .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:checked, .screenshot-ui-show-pointer-button:checked { + border: 1px solid transparent; + color: white; + background-color: #4c505e; } + .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:checked:hover, .screenshot-ui-show-pointer-button:checked:hover { + background-color: #555b71; } + .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:checked:active, .screenshot-ui-show-pointer-button:checked:active { + background-color: #5b627a; } /* Switches */ .toggle-switch { @@ -2771,6 +2806,20 @@ $_osd_color: if($variant=='light', black, $fg_color); color: transparent; transition-duration: 0s; } +/* Screenshot UI */ +.screenshot-ui-shot-cast-container { + background-color: #383d4b; } + +.screenshot-ui-shot-cast-button { + background-color: transparent; } + .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { + background-color: #464b5d; } + .screenshot-ui-shot-cast-button:active { + background-color: #51576b; } + .screenshot-ui-shot-cast-button:checked { + background-color: white; + color: black; } + /* Top Bar */ #panel { background: rgba(255, 255, 255, 0.8); diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 2d4e7d02..b895f2ee 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -12,6 +12,18 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); box-shadow: 0 4px 10px transparentize(black, .8); } +// buttons on OSD elements +// that are undecorated by default and use OSD colors +%osd_button { + @include button(undecorated); + border: 0!important; + &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color); } + &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color); } + &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color); } + &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color); } + &:outlined, &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color); } +} + /* Switches */ .toggle-switch { height: 22px; @@ -120,6 +132,18 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); } } +/* Screenshot UI */ +.screenshot-ui-shot-cast-container { + background-color: lighten($osd_bg_color, 4%); +} + +.screenshot-ui-shot-cast-button { + background-color: transparent; + &:hover, &:focus { background-color: lighten($osd_bg_color, 10%); } + &:active { background-color: lighten($osd_bg_color, 15%); } + &:checked { background-color: white; color: black; } +} + /* Top Bar */ #panel { $_panel_bg: transparentize($bg_color, .2); From 853250e121bb1ab2e5ebb4d2934ee09919b55deb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Fri, 11 Mar 2022 19:13:41 +0100 Subject: [PATCH 30/34] Gnome-Shell: theme workspace switcher --- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 8 ++++++++ share/themes/Kali-Light/gnome-shell/gnome-shell.css | 8 ++++++++ src/themes/Kali/sass/gnome-shell/_common-tweaks.scss | 11 +++++++++++ 3 files changed, 27 insertions(+) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 4dc4f2ae..0a210b1f 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2810,6 +2810,14 @@ StScrollBar { color: transparent; transition-duration: 0s; } +/* Workspace Switcher */ +.ws-switcher-indicator { + padding: 2px; + margin: 10px; } + .ws-switcher-indicator:active { + padding: 4px; + margin: 8px; } + /* Screenshot UI */ .screenshot-ui-shot-cast-container { background-color: #383d4b; } diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 193f144d..18ca84f3 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2806,6 +2806,14 @@ StScrollBar { color: transparent; transition-duration: 0s; } +/* Workspace Switcher */ +.ws-switcher-indicator { + padding: 2px; + margin: 10px; } + .ws-switcher-indicator:active { + padding: 4px; + margin: 8px; } + /* Screenshot UI */ .screenshot-ui-shot-cast-container { background-color: #383d4b; } diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index b895f2ee..2a733556 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -132,6 +132,17 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); } } +/* Workspace Switcher */ +.ws-switcher-indicator { + padding: 2px; + margin: 10px; + + &:active { + padding: 4px; + margin: 8px; + } +} + /* Screenshot UI */ .screenshot-ui-shot-cast-container { background-color: lighten($osd_bg_color, 4%); From e37f7fe26e7be17a16fa7d61a0fe550e1e0eef54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Thu, 7 Apr 2022 11:00:31 +0200 Subject: [PATCH 31/34] Update 'breaks' version for gnome-shell --- debian/control | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/debian/control b/debian/control index cd098451..cb4fd437 100644 --- a/debian/control +++ b/debian/control @@ -64,7 +64,7 @@ Depends: plymouth-label, ${misc:Depends}, Breaks: - gnome-shell (<< 40.2), + gnome-shell (<< 42.0), kali-defaults (<< 2019.4.0), kali-desktop-xfce (<< 2020.2.18), kali-menu (<< 2019.4.4), From 578d50fe8a119568a73ed3e49944b806dd57aeb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Fri, 8 Apr 2022 12:01:54 +0200 Subject: [PATCH 32/34] Gnome-Shell: tweak theme shadows --- .../Kali-Dark/gnome-shell/gnome-shell.css | 18 ++++++++----- .../Kali-Light/gnome-shell/gnome-shell.css | 18 ++++++++----- .../Kali/sass/gnome-shell/_common-tweaks.scss | 25 ++++++++++++------- 3 files changed, 40 insertions(+), 21 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 0a210b1f..4b39b3ba 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2663,7 +2663,7 @@ StScrollBar { /* OSD */ .osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel { background-color: rgba(48, 51, 64, 0.96); - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } + box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); } .screenshot-ui-type-button, .screenshot-ui-show-pointer-button { border: 1px solid transparent; @@ -2730,9 +2730,12 @@ StScrollBar { -slider-handle-radius: 0; } /* Popovers/Menus */ +.popup-menu-boxpointer, .candidate-popup-boxpointer { + -arrow-rise: 6px; } + .popup-menu-content, .candidate-popup-content { padding: 4px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); background-color: #272a34; } .popup-menu-item { @@ -2784,13 +2787,13 @@ StScrollBar { /* Notifications & Message Tray */ .notification-banner { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } + box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); } /* Window Picker */ .window-caption { color: black; background-color: white; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } + box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); } .window-close, .screenshot-ui-close-button { background-image: url("assets/close-window.svg"); @@ -2877,7 +2880,7 @@ StScrollBar { /* Search */ .search-entry { color: black; - text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); font-weight: bold; background-color: rgba(255, 255, 255, 0.1); font-size: 1.1em; @@ -2901,7 +2904,7 @@ StScrollBar { icon-shadow: none; } .search-entry .search-entry-icon { color: white; - icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); } + icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); } .search-section-content { background-color: rgba(255, 255, 255, 0.1); @@ -2910,6 +2913,9 @@ StScrollBar { .search-provider-icon .list-search-provider-details { font-weight: bold; } +.list-search-result .list-search-result-description { + color: rgba(255, 255, 255, 0.8); } + /* Dash */ #dash { color: white; diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 18ca84f3..daf6bc1b 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2659,7 +2659,7 @@ StScrollBar { /* OSD */ .osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel { background-color: rgba(48, 51, 64, 0.96); - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } + box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); } .screenshot-ui-type-button, .screenshot-ui-show-pointer-button { border: 1px solid transparent; @@ -2726,9 +2726,12 @@ StScrollBar { -slider-handle-radius: 0; } /* Popovers/Menus */ +.popup-menu-boxpointer, .candidate-popup-boxpointer { + -arrow-rise: 6px; } + .popup-menu-content, .candidate-popup-content { padding: 4px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); background-color: #fafafa; } .popup-menu-item { @@ -2780,13 +2783,13 @@ StScrollBar { /* Notifications & Message Tray */ .notification-banner { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } + box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); } /* Window Picker */ .window-caption { color: black; background-color: white; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } + box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); } .window-close, .screenshot-ui-close-button { background-image: url("assets/close-window.svg"); @@ -2873,7 +2876,7 @@ StScrollBar { /* Search */ .search-entry { color: black; - text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); font-weight: bold; background-color: rgba(255, 255, 255, 0.1); font-size: 1.1em; @@ -2897,7 +2900,7 @@ StScrollBar { icon-shadow: none; } .search-entry .search-entry-icon { color: white; - icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); } + icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); } .search-section-content { background-color: rgba(255, 255, 255, 0.1); @@ -2906,6 +2909,9 @@ StScrollBar { .search-provider-icon .list-search-provider-details { font-weight: bold; } +.list-search-result .list-search-result-description { + color: rgba(255, 255, 255, 0.8); } + /* Dash */ #dash { color: white; diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 2a733556..0d6f1969 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -1,5 +1,5 @@ $overview_transparent_bg: transparentize(white, .9); -$dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); +$dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8); // Dropshadow for large icons .icon-dropshadow { @@ -9,7 +9,7 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); /* OSD */ %osd_panel { background-color: transparentize($osd_bg_color, 0.04); - box-shadow: 0 4px 10px transparentize(black, .8); + box-shadow: $dialog_box_shadow; } // buttons on OSD elements @@ -38,9 +38,13 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); } /* Popovers/Menus */ +.popup-menu-boxpointer { + -arrow-rise: 6px; +} + .popup-menu-content { padding: 4px; - box-shadow: 0 2px 4px transparentize(black, .8); + box-shadow: $dialog_box_shadow; background-color: $base_color; } @@ -96,9 +100,7 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); } /* Notifications & Message Tray */ -.notification-banner { - box-shadow: 0 2px 4px transparentize(black, .8); -} +.notification-banner { box-shadow: $dialog_box_shadow; } /* Window Picker */ // Window titles @@ -159,7 +161,7 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); #panel { $_panel_bg: transparentize($bg_color, .2); $_panel_fg: if($variant=='light', black, white); - $_panel_text_shadow: 0 1px 2px transparentize(black, 0.5); + $_panel_text_shadow: 0 1px 2px transparentize(black, 0.7); background: $_panel_bg; text-shadow: $_panel_text_shadow; @@ -224,8 +226,9 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); /* Search */ // search entry .search-entry { + $_text-shadow: 0px 1px 2px transparentize(black, 0.5); color: black; - text-shadow: 0px 1px 2px rgba(black, 0.9); + text-shadow: $_text-shadow; font-weight: bold; background-color: $overview_transparent_bg; font-size: 1.1em; @@ -256,7 +259,7 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); .search-entry-icon { color: white; - icon-shadow: 0px 1px 2px rgba(black, 0.9); + icon-shadow: $_text-shadow; } } @@ -269,6 +272,10 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); // search result provider .search-provider-icon .list-search-provider-details { font-weight: bold; } +.list-search-result .list-search-result-description { + color: transparentize($osd_fg_color, .2); +} + /* Dash */ #dash { color: $osd_fg_color; From 251e07c22940d84470ccc02782d2747e0e16aa61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Fri, 8 Apr 2022 12:06:52 +0200 Subject: [PATCH 33/34] Gnome-Shell: reduce opacity of panel shadow --- share/themes/Kali-Dark/gnome-shell/gnome-shell.css | 4 ++-- share/themes/Kali-Light/gnome-shell/gnome-shell.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 4b39b3ba..c24c5448 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2838,9 +2838,9 @@ StScrollBar { /* Top Bar */ #panel { background: rgba(35, 37, 46, 0.8); - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #panel StIcon { - icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview { background-color: transparent; } #panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked { diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index daf6bc1b..0f55766d 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2834,9 +2834,9 @@ StScrollBar { /* Top Bar */ #panel { background: rgba(255, 255, 255, 0.8); - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #panel StIcon { - icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview { background-color: transparent; } #panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked { From ee974e61a9f09b17ad2f5177003176fe5b1d358d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 13 Apr 2022 10:15:58 +0200 Subject: [PATCH 34/34] Remove gnome-backgrounds.xml divertion for GNOME 42 --- debian/kali-themes.postinst | 9 --------- 1 file changed, 9 deletions(-) diff --git a/debian/kali-themes.postinst b/debian/kali-themes.postinst index 20a480f6..d98e6cd9 100644 --- a/debian/kali-themes.postinst +++ b/debian/kali-themes.postinst @@ -113,15 +113,6 @@ if [ "$1" = "configure" ]; then # Install remaining new files install_all fi - # Disable GNOME backgrounds - file=/usr/share/gnome-background-properties/gnome-backgrounds.xml - if [ -e $file ]; then - diverted_file=$(dirname $file)/disabled/$(basename $file) - mkdir -p "$(dirname $diverted_file)" - dpkg-divert --rename --package kali-themes \ - --divert "$diverted_file" \ - --add "$file" - fi # Configure /root/.face to have a red-background avatar if [ ! -e /root/.face ]; then cp /usr/share/kali-themes/.face-root.svg /root/.face