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