From 48c9290e05147334f0229e99657269fb21baa456 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Fri, 11 Mar 2022 18:21:13 +0100 Subject: [PATCH] Gnome-Shell: theme screenshot dialog --- .../Kali-Dark/gnome-shell/gnome-shell.css | 89 ++++++++++++++----- .../Kali-Light/gnome-shell/gnome-shell.css | 89 ++++++++++++++----- .../Kali/sass/gnome-shell/_common-tweaks.scss | 24 +++++ 3 files changed, 162 insertions(+), 40 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 8eec61d1..4dc4f2ae 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -2661,27 +2661,62 @@ StScrollBar { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); } /* OSD */ -/* -$_osd_color: if($variant=='light', black, $fg_color); -%osd_panel { - font-weight: bold; - background-color: $bg_color; - color: $fg_color; - border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color); - box-shadow: 0 4px 10px transparentize(black, .8); +.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel { + background-color: rgba(48, 51, 64, 0.96); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } - StIcon { - color: $_osd_color; - icon-shadow: 0 0 6px transparentize(black, .6); - } -} - -.osd-window { - .level { - -barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9)); - -barlevel-active-background-color: $_osd_color; - } -} +.screenshot-ui-type-button, .screenshot-ui-show-pointer-button { + border: 1px solid transparent; + background-color: transparent; + background-color: none; + border-color: transparent; + border: 0 !important; } + .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive { + border: 1px solid transparent; + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + border-color: #0d0e11; + background-color: transparent; } + .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive { + border: 1px solid transparent; + background-color: transparent; + background-color: none; + border-color: transparent; } + .screenshot-ui-type-button:insensitive:insensitive, .screenshot-ui-show-pointer-button:insensitive:insensitive { + border: 1px solid transparent; + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + border-color: #0d0e11; + background-color: transparent; } + .screenshot-ui-type-button:focus, .screenshot-ui-show-pointer-button:focus { + border: 1px solid transparent; + color: white; + background-color: #394560; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .screenshot-ui-type-button:focus:hover, .screenshot-ui-show-pointer-button:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-type-button:focus:active, .screenshot-ui-show-pointer-button:focus:active { + background-color: #455170; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-type-button:hover, .screenshot-ui-show-pointer-button:hover { + border: 1px solid transparent; + color: white; + background-color: #414554; + border-color: #272a34; } + .screenshot-ui-type-button:active, .screenshot-ui-show-pointer-button:active { + border: 1px solid transparent; + color: white; + background-color: #464b59; + border-color: #181a20; } + .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:checked, .screenshot-ui-show-pointer-button:checked { + border: 1px solid transparent; + color: white; + background-color: #4c505e; } + .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:checked:hover, .screenshot-ui-show-pointer-button:checked:hover { + background-color: #555b71; } + .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:checked:active, .screenshot-ui-show-pointer-button:checked:active { + background-color: #5b627a; } /* Switches */ .toggle-switch { @@ -2775,6 +2810,20 @@ $_osd_color: if($variant=='light', black, $fg_color); color: transparent; transition-duration: 0s; } +/* Screenshot UI */ +.screenshot-ui-shot-cast-container { + background-color: #383d4b; } + +.screenshot-ui-shot-cast-button { + background-color: transparent; } + .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { + background-color: #464b5d; } + .screenshot-ui-shot-cast-button:active { + background-color: #51576b; } + .screenshot-ui-shot-cast-button:checked { + background-color: white; + color: black; } + /* Top Bar */ #panel { background: rgba(35, 37, 46, 0.8); diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index f5505db5..193f144d 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -2657,27 +2657,62 @@ StScrollBar { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); } /* OSD */ -/* -$_osd_color: if($variant=='light', black, $fg_color); -%osd_panel { - font-weight: bold; - background-color: $bg_color; - color: $fg_color; - border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color); - box-shadow: 0 4px 10px transparentize(black, .8); +.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel { + background-color: rgba(48, 51, 64, 0.96); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } - StIcon { - color: $_osd_color; - icon-shadow: 0 0 6px transparentize(black, .6); - } -} - -.osd-window { - .level { - -barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9)); - -barlevel-active-background-color: $_osd_color; - } -} +.screenshot-ui-type-button, .screenshot-ui-show-pointer-button { + border: 1px solid transparent; + background-color: transparent; + background-color: none; + border-color: transparent; + border: 0 !important; } + .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive { + border: 1px solid transparent; + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + border-color: #d9d9d9; + background-color: transparent; } + .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive { + border: 1px solid transparent; + background-color: transparent; + background-color: none; + border-color: transparent; } + .screenshot-ui-type-button:insensitive:insensitive, .screenshot-ui-show-pointer-button:insensitive:insensitive { + border: 1px solid transparent; + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + border-color: #d9d9d9; + background-color: transparent; } + .screenshot-ui-type-button:focus, .screenshot-ui-show-pointer-button:focus { + border: 1px solid transparent; + color: white; + background-color: #394560; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .screenshot-ui-type-button:focus:hover, .screenshot-ui-show-pointer-button:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-type-button:focus:active, .screenshot-ui-show-pointer-button:focus:active { + background-color: #455170; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-type-button:hover, .screenshot-ui-show-pointer-button:hover { + border: 1px solid transparent; + color: white; + background-color: #414554; + border-color: #181a20; } + .screenshot-ui-type-button:active, .screenshot-ui-show-pointer-button:active { + border: 1px solid transparent; + color: white; + background-color: #464b59; + border-color: #08090b; } + .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:checked, .screenshot-ui-show-pointer-button:checked { + border: 1px solid transparent; + color: white; + background-color: #4c505e; } + .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:checked:hover, .screenshot-ui-show-pointer-button:checked:hover { + background-color: #555b71; } + .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:checked:active, .screenshot-ui-show-pointer-button:checked:active { + background-color: #5b627a; } /* Switches */ .toggle-switch { @@ -2771,6 +2806,20 @@ $_osd_color: if($variant=='light', black, $fg_color); color: transparent; transition-duration: 0s; } +/* Screenshot UI */ +.screenshot-ui-shot-cast-container { + background-color: #383d4b; } + +.screenshot-ui-shot-cast-button { + background-color: transparent; } + .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { + background-color: #464b5d; } + .screenshot-ui-shot-cast-button:active { + background-color: #51576b; } + .screenshot-ui-shot-cast-button:checked { + background-color: white; + color: black; } + /* Top Bar */ #panel { background: rgba(255, 255, 255, 0.8); diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index 2d4e7d02..b895f2ee 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -12,6 +12,18 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); box-shadow: 0 4px 10px transparentize(black, .8); } +// buttons on OSD elements +// that are undecorated by default and use OSD colors +%osd_button { + @include button(undecorated); + border: 0!important; + &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color); } + &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color); } + &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color); } + &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color); } + &:outlined, &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color); } +} + /* Switches */ .toggle-switch { height: 22px; @@ -120,6 +132,18 @@ $dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); } } +/* Screenshot UI */ +.screenshot-ui-shot-cast-container { + background-color: lighten($osd_bg_color, 4%); +} + +.screenshot-ui-shot-cast-button { + background-color: transparent; + &:hover, &:focus { background-color: lighten($osd_bg_color, 10%); } + &:active { background-color: lighten($osd_bg_color, 15%); } + &:checked { background-color: white; color: black; } +} + /* Top Bar */ #panel { $_panel_bg: transparentize($bg_color, .2);