From fd47a59861aa7cbde4148d45083f09b1d61414e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Wed, 9 Mar 2022 08:23:05 +0100 Subject: [PATCH] Gnome-Shell: update popover theme tweaks --- .../Kali-Dark/gnome-shell/gnome-shell.css | 102 +++++++++++------- .../Kali-Light/gnome-shell/gnome-shell.css | 80 +++++++++----- .../Kali/sass/gnome-shell/_common-tweaks.scss | 42 ++++++-- .../upstream/gnome-shell-sass/_common.scss | 6 +- .../gnome-shell-sass/_common.scss.patch | 12 +++ 5 files changed, 165 insertions(+), 77 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 9a151666..63cd614d 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -232,8 +232,8 @@ StEntry { selection-background-color: #2777ff; selected-color: #ffffff; } StEntry:hover { - background-color: #363a48; - border-color: #363a48; + background-color: #3b3f4e; + border-color: #3b3f4e; color: rgba(238, 238, 236, 0.7); } StEntry:focus { background-color: #2d3546; @@ -354,21 +354,21 @@ StScrollBar { .popup-menu-item:rtl { padding-right: 6px; } .popup-menu-item:focus, .popup-menu-item:hover { - background-color: #2b2f3a !important; } + background-color: #303340 !important; } .popup-menu-item:focus:active, .popup-menu-item:hover:active { - background-color: #303340 !important; } + background-color: #343845 !important; } .popup-menu-item:checked { - background-color: #363a48 !important; } + background-color: #3b3f4e !important; } .popup-menu-item:checked { margin-bottom: 0; - box-shadow: inset 0 -1px 0 0 #2b2f3a; + box-shadow: inset 0 -1px 0 0 #303340; border-radius: 8px 8px 0 0; } .popup-menu-item:checked:focus, .popup-menu-item:checked:hover { - background-color: #3d4251 !important; } - .popup-menu-item:checked:active { background-color: #414657 !important; } + .popup-menu-item:checked:active { + background-color: #464b5d !important; } .popup-menu-item:active { - background-color: #3b3f4e; + background-color: #3f4454; color: #fcfcfc; } .popup-menu-item:insensitive { color: rgba(238, 238, 236, 0.5); } @@ -387,7 +387,7 @@ StScrollBar { icon-size: 16px !important; } .popup-sub-menu { - background-color: #363a48; + background-color: #3b3f4e; border-radius: 0 0 8px 8px; } .popup-sub-menu .popup-menu-ornament { min-width: 1.09em !important; } @@ -397,13 +397,13 @@ StScrollBar { .popup-sub-menu .popup-menu-item:last-child { border-radius: 0 0 8px 8px; } .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { - background-color: #414657 !important; } - .popup-sub-menu .popup-menu-item:checked { - background-color: #4c5266 !important; } - .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { - background-color: #484d60 !important; } - .popup-sub-menu .popup-menu-item:active { background-color: #464b5d !important; } + .popup-sub-menu .popup-menu-item:checked { + background-color: #51576b !important; } + .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { + background-color: #4c5266 !important; } + .popup-sub-menu .popup-menu-item:active { + background-color: #4a5063 !important; } .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus { border-radius: 0; } .popup-sub-menu .popup-menu-section:last-child .popup-menu-item:last-child { @@ -551,9 +551,9 @@ StScrollBar { margin: 2px; border-radius: 6px; } .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { - background-color: #2b2f3a; } - .calendar .calendar-month-header .pager-button:active { background-color: #303340; } + .calendar .calendar-month-header .pager-button:active { + background-color: #343845; } .calendar .calendar-day-base { text-align: center; margin: 2px; @@ -562,16 +562,16 @@ StScrollBar { width: 32px !important; border-radius: 99px; } .calendar .calendar-day-base:hover { - background-color: #2b2f3a; } + background-color: #303340; } .calendar .calendar-day-base:focus { background-color: #243658; color: #ffffff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { color: #fcfcfc; - background-color: #303340; } + background-color: #343845; } .calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus { - background-color: #2e4166; } + background-color: #31456b; } .calendar .calendar-day-base.calendar-day-heading { color: #888a8d; padding-top: 6px; @@ -846,10 +846,10 @@ StScrollBar { border-radius: 8px; color: #eeeeec; } .message-media-control:hover { - background-color: #363a48; + background-color: #3b3f4e; color: #eeeeec; } .message-media-control:active { - background-color: #3b3f4e; + background-color: #3f4454; color: #eeeeec; } .message-media-control:insensitive { color: #959799; } @@ -885,7 +885,7 @@ StScrollBar { background-color: #2777ff; color: #ffffff; } .candidate-box:hover { - background-color: #2b2f3a; + background-color: #303340; color: #f8f8f7; } .candidate-page-button-box { @@ -1068,7 +1068,7 @@ StScrollBar { .audio-selection-device { border-radius: 16px; } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: #2b2f3a; } + background-color: #303340; } .audio-selection-device:active { background-color: #2777ff; color: #ffffff; } @@ -1119,7 +1119,7 @@ StScrollBar { border-radius: 5px; color: #ffffff; } .nm-dialog-item:hover { - background-color: #2b2f3a; } + background-color: #303340; } .nm-dialog-icon { icon-size: 1.09em; } @@ -1294,7 +1294,7 @@ StScrollBar { transition-duration: 200ms; border-radius: 99px; } .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus { - background-color: #2b2f3a; } + background-color: #303340; } .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { background-color: #d9d9d9; } .screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle { @@ -1307,7 +1307,7 @@ StScrollBar { background-color: #360707; } .screenshot-ui-shot-cast-container { - background-color: #2b2f3a; + background-color: #303340; border-radius: 16px; padding: 3px; spacing: 3px; } @@ -1321,9 +1321,9 @@ StScrollBar { background-color: transparent; border-radius: 13px; } .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { - background-color: #363a48; } - .screenshot-ui-shot-cast-button:active { background-color: #3b3f4e; } + .screenshot-ui-shot-cast-button:active { + background-color: #3f4454; } .screenshot-ui-shot-cast-button:checked { background-color: white; color: black; } @@ -1572,8 +1572,8 @@ StScrollBar { border: 2px solid #2e313d; } .search-entry:hover { - background-color: #363a48; - border-color: #363a48; + background-color: #3b3f4e; + border-color: #3b3f4e; color: rgba(238, 238, 236, 0.7); } .search-entry:focus { @@ -2596,14 +2596,38 @@ $_osd_color: if($variant=='light', black, $fg_color); -slider-handle-radius: 0; } /* Popovers/Menus */ -/* -// menu items +.popup-menu-content, .candidate-popup-content { + padding: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + background-color: #272a34; } + .popup-menu-item { - &.selected, &:active { - background-color: $popover_hover_color; - color: $fg_color; - } -} + border: 1px solid transparent; + border-bottom: 0; + margin-top: 0; + margin-bottom: 0; + padding-top: 8px; + padding-bottom: 8px; } + .popup-menu-item:checked { + border-color: #0d0e11; + background-color: #23252e !important; } + +.popup-sub-menu { + background-color: #23252e; + border: 1px solid #0d0e11; + border-top: 0; } + .popup-sub-menu .popup-menu-item { + padding-top: 7px; + padding-bottom: 7px; } + .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { + background-color: #303340 !important; } + .popup-sub-menu .popup-menu-item:checked { + background-color: #3b3f4e !important; } + .popup-sub-menu .popup-menu-item:active { + background-color: #343845 !important; } + +.popup-separator-menu-item { + margin: 6px 0; } /* Message List */ .message-list .message-list-placeholder, diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 6641b502..53f6820a 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -354,21 +354,21 @@ StScrollBar { .popup-menu-item:rtl { padding-right: 6px; } .popup-menu-item:focus, .popup-menu-item:hover { - background-color: #f7f7f7 !important; } + background-color: #f2f2f2 !important; } .popup-menu-item:focus:active, .popup-menu-item:hover:active { - background-color: #f2f2f2 !important; } + background-color: #ededed !important; } .popup-menu-item:checked { - background-color: #ededed !important; } + background-color: #e8e8e8 !important; } .popup-menu-item:checked { margin-bottom: 0; - box-shadow: inset 0 -1px 0 0 #e0e0e0; + box-shadow: inset 0 -1px 0 0 #dbdbdb; border-radius: 8px 8px 0 0; } .popup-menu-item:checked:focus, .popup-menu-item:checked:hover { - background-color: whitesmoke !important; } + background-color: #f0f0f0 !important; } .popup-menu-item:checked:active { - background-color: #fafafa !important; } + background-color: whitesmoke !important; } .popup-menu-item:active { - background-color: white; + background-color: #fafafa; color: #50555e; } .popup-menu-item:insensitive { color: rgba(92, 97, 108, 0.5); } @@ -387,7 +387,7 @@ StScrollBar { icon-size: 16px !important; } .popup-sub-menu { - background-color: #ededed; + background-color: #e8e8e8; border-radius: 0 0 8px 8px; } .popup-sub-menu .popup-menu-ornament { min-width: 1.09em !important; } @@ -401,7 +401,7 @@ StScrollBar { .popup-sub-menu .popup-menu-item:checked { background-color: white !important; } .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { - background-color: white !important; } + background-color: #fcfcfc !important; } .popup-sub-menu .popup-menu-item:active { background-color: white !important; } .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus { @@ -551,9 +551,9 @@ StScrollBar { margin: 2px; border-radius: 6px; } .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { - background-color: #f7f7f7; } - .calendar .calendar-month-header .pager-button:active { background-color: #f2f2f2; } + .calendar .calendar-month-header .pager-button:active { + background-color: #ededed; } .calendar .calendar-day-base { text-align: center; margin: 2px; @@ -562,16 +562,16 @@ StScrollBar { width: 32px !important; border-radius: 99px; } .calendar .calendar-day-base:hover { - background-color: #f7f7f7; } + background-color: #f2f2f2; } .calendar .calendar-day-base:focus { background-color: #d4e4ff; color: #ffffff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { color: #50555e; - background-color: #f2f2f2; } + background-color: #ededed; } .calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus { - background-color: #cadaf5; } + background-color: #c6d6f1; } .calendar .calendar-day-base.calendar-day-heading { color: #aeb0b6; padding-top: 6px; @@ -849,7 +849,7 @@ StScrollBar { background-color: white; color: #5c616c; } .message-media-control:active { - background-color: white; + background-color: #fafafa; color: #5c616c; } .message-media-control:insensitive { color: #bbbdc2; } @@ -885,7 +885,7 @@ StScrollBar { background-color: #2777ff; color: #ffffff; } .candidate-box:hover { - background-color: #f7f7f7; + background-color: #f2f2f2; color: #50555e; } .candidate-page-button-box { @@ -1068,7 +1068,7 @@ StScrollBar { .audio-selection-device { border-radius: 16px; } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: #f7f7f7; } + background-color: #f2f2f2; } .audio-selection-device:active { background-color: #2777ff; color: #ffffff; } @@ -1119,7 +1119,7 @@ StScrollBar { border-radius: 5px; color: #ffffff; } .nm-dialog-item:hover { - background-color: #f7f7f7; } + background-color: #f2f2f2; } .nm-dialog-icon { icon-size: 1.09em; } @@ -1294,7 +1294,7 @@ StScrollBar { transition-duration: 200ms; border-radius: 99px; } .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus { - background-color: #f7f7f7; } + background-color: #f2f2f2; } .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { background-color: #d9d9d9; } .screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle { @@ -1307,7 +1307,7 @@ StScrollBar { background-color: #360707; } .screenshot-ui-shot-cast-container { - background-color: #f7f7f7; + background-color: #f2f2f2; border-radius: 16px; padding: 3px; spacing: 3px; } @@ -1323,7 +1323,7 @@ StScrollBar { .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { background-color: white; } .screenshot-ui-shot-cast-button:active { - background-color: white; } + background-color: #fafafa; } .screenshot-ui-shot-cast-button:checked { background-color: white; color: black; } @@ -2592,14 +2592,38 @@ $_osd_color: if($variant=='light', black, $fg_color); -slider-handle-radius: 0; } /* Popovers/Menus */ -/* -// menu items +.popup-menu-content, .candidate-popup-content { + padding: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + background-color: #fafafa; } + .popup-menu-item { - &.selected, &:active { - background-color: $popover_hover_color; - color: $fg_color; - } -} + border: 1px solid transparent; + border-bottom: 0; + margin-top: 0; + margin-bottom: 0; + padding-top: 8px; + padding-bottom: 8px; } + .popup-menu-item:checked { + border-color: #d9d9d9; + background-color: #ffffff !important; } + +.popup-sub-menu { + background-color: #ffffff; + border: 1px solid #d9d9d9; + border-top: 0; } + .popup-sub-menu .popup-menu-item { + padding-top: 7px; + padding-bottom: 7px; } + .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { + background-color: #f2f2f2 !important; } + .popup-sub-menu .popup-menu-item:checked { + background-color: #e8e8e8 !important; } + .popup-sub-menu .popup-menu-item:active { + background-color: #ededed !important; } + +.popup-separator-menu-item { + margin: 6px 0; } /* Message List */ .message-list .message-list-placeholder, diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 3e503998..06f83313 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -38,15 +38,43 @@ $_osd_color: if($variant=='light', black, $fg_color); } /* Popovers/Menus */ -/* -// menu items -.popup-menu-item { - &.selected, &:active { - background-color: $popover_hover_color; - color: $fg_color; - } +.popup-menu-content { + padding: 4px; + box-shadow: 0 2px 4px transparentize(black, .8); + background-color: $base_color; } +.popup-menu-item { + border: 1px solid transparent; + border-bottom: 0; + margin-top: 0; + margin-bottom: 0; + padding-top: 8px; + padding-bottom: 8px; + + &:checked { + border-color: $borders_color; + background-color: $bg_color!important; + } +} + +.popup-sub-menu { + background-color: $bg_color; + border: 1px solid $borders_color; + border-top: 0; + + .popup-menu-item { + padding-top: 7px; + padding-bottom: 7px; + + &:focus, &:hover { background-color: $hover_bg_color!important; } + &:checked { background-color: $checked_bg_color!important; } + &:active { background-color: $active_bg_color!important; } + } +} + +.popup-separator-menu-item { margin: 6px 0; } + /* Message List */ .message-list .message-list-placeholder, .message-list-controls { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss index c7c3143a..c4ce9997 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss @@ -36,15 +36,15 @@ $base_border_radius: 8px; $modal_radius: $base_border_radius*2; // 24px // derived hover colors -$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%)); +$hover_bg_color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 4%)); $hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%)); // derived active colors -$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%)); +$active_bg_color: if($variant=='light', darken($base_color, 5%), lighten($base_color, 6%)); $active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%)); // derived checked colors -$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%)); +$checked_bg_color: if($variant=='light', darken($base_color, 7%), lighten($base_color, 9%)); $checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%)); // fonts diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch index 175bbbe3..4865ccc5 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch @@ -1,3 +1,15 @@ +39c39 +< $hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%)); +--- +> $hover_bg_color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 4%)); +43c43 +< $active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%)); +--- +> $active_bg_color: if($variant=='light', darken($base_color, 5%), lighten($base_color, 6%)); +47c47 +< $checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%)); +--- +> $checked_bg_color: if($variant=='light', darken($base_color, 7%), lighten($base_color, 9%)); 51c51 < $base_font_size: 11; ---