diff --git a/share/themes/Kali-Dark/gtk-3.0/gtk.css b/share/themes/Kali-Dark/gtk-3.0/gtk.css index 18dfdfc9..ec01a8c2 100644 --- a/share/themes/Kali-Dark/gtk-3.0/gtk.css +++ b/share/themes/Kali-Dark/gtk-3.0/gtk.css @@ -4746,6 +4746,332 @@ popover.emoji-completion contents row box { popover.emoji-completion .emoji:hover { background: #2a2e39; } +/*************************** + * Check and Radio buttons * + ***************************/ +row label.subtitle { + font-size: smaller; + opacity: 0.55; + text-shadow: none; } + +row > box.header { + margin-left: 12px; + margin-right: 12px; + min-height: 50px; } + row > box.header > box.title { + margin-top: 8px; + margin-bottom: 8px; } + +row.expander { + background-color: transparent; } + row.expander list.nested > row { + background-color: alpha(#23252e, 0.5); + border-color: alpha(#0d0e11, 0.7); + border-style: solid; + border-width: 1px 0px 0px 0px; } + row.expander image.expander-row-arrow { + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + row.expander:checked image.expander-row-arrow { + -gtk-icon-transform: rotate(0turn); } + row.expander:not(:checked) image.expander-row-arrow { + opacity: 0.55; + text-shadow: none; } + row.expander:not(:checked) image.expander-row-arrow:dir(ltr) { + -gtk-icon-transform: rotate(-0.25turn); } + row.expander:not(:checked) image.expander-row-arrow:dir(rtl) { + -gtk-icon-transform: rotate(0.25turn); } + row.expander:checked image.expander-row-arrow:not(:disabled) { + color: #2777ff; } + row.expander image.expander-row-arrow:disabled { + color: #888a8d; } + +deck > dimming, +leaflet > dimming { + background: rgba(0, 0, 0, 0.24); } + +deck > border, +leaflet > border { + min-width: 1px; + min-height: 1px; + background: #0d0e11; } + +deck > shadow, +leaflet > shadow { + min-width: 56px; + min-height: 56px; } + deck > shadow.left, + leaflet > shadow.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); } + deck > shadow.right, + leaflet > shadow.right { + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); } + deck > shadow.up, + leaflet > shadow.up { + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); } + deck > shadow.down, + leaflet > shadow.down { + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); } + +deck > outline, +leaflet > outline { + min-width: 1px; + min-height: 1px; + background: transparent; } + +avatar { + border-radius: 9999px; + -gtk-outline-radius: 9999px; + font-weight: bold; } + avatar.color1 { + background-image: linear-gradient(#83b6ec, #337fdc); + color: #cfe1f5; } + avatar.color2 { + background-image: linear-gradient(#7ad9f1, #0f9ac8); + color: #caeaf2; } + avatar.color3 { + background-image: linear-gradient(#8de6b1, #29ae74); + color: #cef8d8; } + avatar.color4 { + background-image: linear-gradient(#b5e98a, #6ab85b); + color: #e6f9d7; } + avatar.color5 { + background-image: linear-gradient(#f8e359, #d29d09); + color: #f9f4e1; } + avatar.color6 { + background-image: linear-gradient(#ffcb62, #d68400); + color: #ffead1; } + avatar.color7 { + background-image: linear-gradient(#ffa95a, #ed5b00); + color: #ffe5c5; } + avatar.color8 { + background-image: linear-gradient(#f78773, #e62d42); + color: #f8d2ce; } + avatar.color9 { + background-image: linear-gradient(#e973ab, #e33b6a); + color: #fac7de; } + avatar.color10 { + background-image: linear-gradient(#cb78d4, #9945b5); + color: #e7c2e8; } + avatar.color11 { + background-image: linear-gradient(#9e91e8, #7a59ca); + color: #d5d2f5; } + avatar.color12 { + background-image: linear-gradient(#e3cf9c, #b08952); + color: #f2eade; } + avatar.color13 { + background-image: linear-gradient(#be916d, #785336); + color: #e5d6ca; } + avatar.color14 { + background-image: linear-gradient(#c0bfbc, #6e6d71); + color: #d8d7d3; } + avatar.contrasted { + color: #fff; } + +viewswitchertitle viewswitcher { + margin-left: 12px; + margin-right: 12px; } + +/*************************** + * Check and Radio buttons * + ***************************/ +popover.combo list { + min-width: 200px; } + +window.csd.unified:not(.solid-csd) headerbar { + border-radius: 0; } + +.windowhandle, .windowhandle * { + -GtkWidget-window-dragging: true; } + +popover.combo { + padding: 0px; } + popover.combo list { + border-style: none; + background-color: transparent; } + popover.combo list > row { + padding: 0px 12px 0px 12px; + min-height: 50px; } + popover.combo list > row:not(:last-child) { + border-bottom: 1px solid alpha(#0d0e11, 0.5); } + popover.combo list > row:first-child { + border-top-left-radius: 8px; + -gtk-outline-top-left-radius: 7px; + border-top-right-radius: 8px; + -gtk-outline-top-right-radius: 7px; } + popover.combo list > row:last-child { + border-bottom-left-radius: 8px; + -gtk-outline-bottom-left-radius: 7px; + border-bottom-right-radius: 8px; + -gtk-outline-bottom-right-radius: 7px; } + popover.combo overshoot.top { + border-top-left-radius: 8px; + -gtk-outline-top-left-radius: 7px; + border-top-right-radius: 8px; + -gtk-outline-top-right-radius: 7px; } + popover.combo overshoot.bottom { + border-bottom-left-radius: 8px; + -gtk-outline-bottom-left-radius: 7px; + border-bottom-right-radius: 8px; + -gtk-outline-bottom-right-radius: 7px; } + popover.combo scrollbar.vertical { + padding-top: 2px; + padding-bottom: 2px; } + popover.combo scrollbar.vertical:dir(ltr) { + border-top-right-radius: 8px; + -gtk-outline-top-right-radius: 7px; + border-bottom-right-radius: 8px; + -gtk-outline-bottom-right-radius: 7px; } + popover.combo scrollbar.vertical:dir(rtl) { + border-top-left-radius: 8px; + -gtk-outline-top-left-radius: 7px; + border-bottom-left-radius: 8px; + -gtk-outline-bottom-left-radius: 7px; } + +row.expander { + padding: 0px; } + row.expander image.expander-row-arrow:dir(ltr) { + margin-left: 6px; } + row.expander image.expander-row-arrow:dir(rtl) { + margin-right: 6px; } + +keypad .digit { + font-size: 200%; + font-weight: bold; } + +keypad .letters { + font-size: 70%; } + +keypad .symbol { + font-size: 160%; } + +viewswitcher, viewswitcher button { + margin: 0; + padding: 0; } + +viewswitcher button { + border-radius: 0; + border-top: 0; + border-bottom: 0; + box-shadow: none; + font-size: 1rem; } + viewswitcher button:not(:checked):not(:hover) { + background: transparent; } + viewswitcher button:not(:only-child):not(:last-child) { + border-right-width: 0px; } + viewswitcher button:not(only-child):first-child:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):not(:hover) { + border-left-color: transparent; } + viewswitcher button:not(only-child):last-child:not(:checked):not(:hover) { + border-right-color: transparent; } + viewswitcher button:not(:checked):hover:not(:backdrop) { + background-image: image(lighter(#23252e)); } + viewswitcher button:not(only-child):first-child:not(:checked):hover, viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { + border-left-color: shade(#0d0e11, 1.15); } + viewswitcher button:not(only-child):last-child:not(:checked):hover { + border-right-color: shade(#0d0e11, 1.15); } + viewswitcher button:not(:checked):hover:backdrop { + background-image: image(#23252e); } + headerbar viewswitcher button:not(:checked):hover:not(:backdrop) { + background-image: linear-gradient(to top, shade(alpha(#23252e, 0.7), 0.99) 2px, alpha(#23252e, 0.7)); } + headerbar viewswitcher button:not(:checked):not(only-child):first-child:hover, headerbar viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), headerbar viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { + border-left-color: #0d0e11; } + headerbar viewswitcher button:not(:checked):not(only-child):last-child:hover { + border-right-color: #0d0e11; } + headerbar viewswitcher button:not(:checked):hover:backdrop { + background-image: image(#23252e); } + viewswitcher button > stack > box.narrow { + font-size: 0.75rem; + padding-top: 7px; + padding-bottom: 5px; } + viewswitcher button > stack > box.narrow image, + viewswitcher button > stack > box.narrow label { + padding-left: 8px; + padding-right: 8px; } + viewswitcher button > stack > box.wide { + padding: 8px 12px; } + viewswitcher button > stack > box.wide label:dir(ltr) { + padding-right: 7px; } + viewswitcher button > stack > box.wide label:dir(rtl) { + padding-left: 7px; } + viewswitcher button > stack > box label.active { + font-weight: bold; } + viewswitcher button.needs-attention:active > stack > box label, viewswitcher button.needs-attention:checked > stack > box label { + animation: none; + background-image: none; } + viewswitcher button.needs-attention > stack > box label { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + background-position: right 0px, right 1px; } + viewswitcher button.needs-attention > stack > box label:backdrop { + background-size: 6px 6px, 0 0; } + viewswitcher button.needs-attention > stack > box label:dir(rtl) { + background-position: left 0px, left 1px; } + +viewswitcherbar actionbar > revealer > box { + padding: 0; } + +list.content, +list.content list { + background-color: transparent; } + +list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > row:not(:active):hover:not(.activatable):not(:selected) { + background-color: mix(#23252e, #272a34, 0.5); } + +list.content list.nested > row.activatable:not(:active):hover:not(:selected) { + background-color: mix(#eeeeec, #272a34, 0.95); } + +list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander row.header:not(:active):not(:hover):not(:selected), list.content > row.expander row.header:not(:active):hover:not(.activatable):not(:selected) { + background-color: #272a34; } + +list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander row.header.activatable:not(:active):hover:not(:selected) { + background-color: mix(#eeeeec, #272a34, 0.95); } + +list.content > row, +list.content > row list > row { + border-color: alpha(#0d0e11, 0.7); + border-style: solid; + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +list.content > row:not(:last-child) { + border-width: 1px 1px 0px 1px; } + +list.content > row:first-child, list.content > row.expander:first-child row.header, list.content > row.expander:checked, list.content > row.expander:checked row.header, list.content > row.expander:checked + row, list.content > row.expander:checked + row.expander row.header { + border-top-left-radius: 8px; + -gtk-outline-top-left-radius: 7px; + border-top-right-radius: 8px; + -gtk-outline-top-right-radius: 7px; } + +list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > row.expander:checked { + border-width: 1px; } + +list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { + border-bottom-left-radius: 8px; + -gtk-outline-bottom-left-radius: 7px; + border-bottom-right-radius: 8px; + -gtk-outline-bottom-right-radius: 7px; } + +list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row { + margin-top: 6px; } + +button.list-button:not(:active):not(:checked):not(:hover) { + background: none; + border: 1px solid alpha(#0d0e11, 0.5); + box-shadow: none; } + +window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar { + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar.selection-mode { + box-shadow: none; } + +window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.065); } + +window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized), +window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration, +window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration-overlay { + border-radius: 8px; } + * { outline-style: solid; outline-offset: -4px; diff --git a/share/themes/Kali-Light/gtk-3.0/gtk-dark.css b/share/themes/Kali-Light/gtk-3.0/gtk-dark.css index 18dfdfc9..ec01a8c2 100644 --- a/share/themes/Kali-Light/gtk-3.0/gtk-dark.css +++ b/share/themes/Kali-Light/gtk-3.0/gtk-dark.css @@ -4746,6 +4746,332 @@ popover.emoji-completion contents row box { popover.emoji-completion .emoji:hover { background: #2a2e39; } +/*************************** + * Check and Radio buttons * + ***************************/ +row label.subtitle { + font-size: smaller; + opacity: 0.55; + text-shadow: none; } + +row > box.header { + margin-left: 12px; + margin-right: 12px; + min-height: 50px; } + row > box.header > box.title { + margin-top: 8px; + margin-bottom: 8px; } + +row.expander { + background-color: transparent; } + row.expander list.nested > row { + background-color: alpha(#23252e, 0.5); + border-color: alpha(#0d0e11, 0.7); + border-style: solid; + border-width: 1px 0px 0px 0px; } + row.expander image.expander-row-arrow { + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + row.expander:checked image.expander-row-arrow { + -gtk-icon-transform: rotate(0turn); } + row.expander:not(:checked) image.expander-row-arrow { + opacity: 0.55; + text-shadow: none; } + row.expander:not(:checked) image.expander-row-arrow:dir(ltr) { + -gtk-icon-transform: rotate(-0.25turn); } + row.expander:not(:checked) image.expander-row-arrow:dir(rtl) { + -gtk-icon-transform: rotate(0.25turn); } + row.expander:checked image.expander-row-arrow:not(:disabled) { + color: #2777ff; } + row.expander image.expander-row-arrow:disabled { + color: #888a8d; } + +deck > dimming, +leaflet > dimming { + background: rgba(0, 0, 0, 0.24); } + +deck > border, +leaflet > border { + min-width: 1px; + min-height: 1px; + background: #0d0e11; } + +deck > shadow, +leaflet > shadow { + min-width: 56px; + min-height: 56px; } + deck > shadow.left, + leaflet > shadow.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); } + deck > shadow.right, + leaflet > shadow.right { + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); } + deck > shadow.up, + leaflet > shadow.up { + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); } + deck > shadow.down, + leaflet > shadow.down { + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); } + +deck > outline, +leaflet > outline { + min-width: 1px; + min-height: 1px; + background: transparent; } + +avatar { + border-radius: 9999px; + -gtk-outline-radius: 9999px; + font-weight: bold; } + avatar.color1 { + background-image: linear-gradient(#83b6ec, #337fdc); + color: #cfe1f5; } + avatar.color2 { + background-image: linear-gradient(#7ad9f1, #0f9ac8); + color: #caeaf2; } + avatar.color3 { + background-image: linear-gradient(#8de6b1, #29ae74); + color: #cef8d8; } + avatar.color4 { + background-image: linear-gradient(#b5e98a, #6ab85b); + color: #e6f9d7; } + avatar.color5 { + background-image: linear-gradient(#f8e359, #d29d09); + color: #f9f4e1; } + avatar.color6 { + background-image: linear-gradient(#ffcb62, #d68400); + color: #ffead1; } + avatar.color7 { + background-image: linear-gradient(#ffa95a, #ed5b00); + color: #ffe5c5; } + avatar.color8 { + background-image: linear-gradient(#f78773, #e62d42); + color: #f8d2ce; } + avatar.color9 { + background-image: linear-gradient(#e973ab, #e33b6a); + color: #fac7de; } + avatar.color10 { + background-image: linear-gradient(#cb78d4, #9945b5); + color: #e7c2e8; } + avatar.color11 { + background-image: linear-gradient(#9e91e8, #7a59ca); + color: #d5d2f5; } + avatar.color12 { + background-image: linear-gradient(#e3cf9c, #b08952); + color: #f2eade; } + avatar.color13 { + background-image: linear-gradient(#be916d, #785336); + color: #e5d6ca; } + avatar.color14 { + background-image: linear-gradient(#c0bfbc, #6e6d71); + color: #d8d7d3; } + avatar.contrasted { + color: #fff; } + +viewswitchertitle viewswitcher { + margin-left: 12px; + margin-right: 12px; } + +/*************************** + * Check and Radio buttons * + ***************************/ +popover.combo list { + min-width: 200px; } + +window.csd.unified:not(.solid-csd) headerbar { + border-radius: 0; } + +.windowhandle, .windowhandle * { + -GtkWidget-window-dragging: true; } + +popover.combo { + padding: 0px; } + popover.combo list { + border-style: none; + background-color: transparent; } + popover.combo list > row { + padding: 0px 12px 0px 12px; + min-height: 50px; } + popover.combo list > row:not(:last-child) { + border-bottom: 1px solid alpha(#0d0e11, 0.5); } + popover.combo list > row:first-child { + border-top-left-radius: 8px; + -gtk-outline-top-left-radius: 7px; + border-top-right-radius: 8px; + -gtk-outline-top-right-radius: 7px; } + popover.combo list > row:last-child { + border-bottom-left-radius: 8px; + -gtk-outline-bottom-left-radius: 7px; + border-bottom-right-radius: 8px; + -gtk-outline-bottom-right-radius: 7px; } + popover.combo overshoot.top { + border-top-left-radius: 8px; + -gtk-outline-top-left-radius: 7px; + border-top-right-radius: 8px; + -gtk-outline-top-right-radius: 7px; } + popover.combo overshoot.bottom { + border-bottom-left-radius: 8px; + -gtk-outline-bottom-left-radius: 7px; + border-bottom-right-radius: 8px; + -gtk-outline-bottom-right-radius: 7px; } + popover.combo scrollbar.vertical { + padding-top: 2px; + padding-bottom: 2px; } + popover.combo scrollbar.vertical:dir(ltr) { + border-top-right-radius: 8px; + -gtk-outline-top-right-radius: 7px; + border-bottom-right-radius: 8px; + -gtk-outline-bottom-right-radius: 7px; } + popover.combo scrollbar.vertical:dir(rtl) { + border-top-left-radius: 8px; + -gtk-outline-top-left-radius: 7px; + border-bottom-left-radius: 8px; + -gtk-outline-bottom-left-radius: 7px; } + +row.expander { + padding: 0px; } + row.expander image.expander-row-arrow:dir(ltr) { + margin-left: 6px; } + row.expander image.expander-row-arrow:dir(rtl) { + margin-right: 6px; } + +keypad .digit { + font-size: 200%; + font-weight: bold; } + +keypad .letters { + font-size: 70%; } + +keypad .symbol { + font-size: 160%; } + +viewswitcher, viewswitcher button { + margin: 0; + padding: 0; } + +viewswitcher button { + border-radius: 0; + border-top: 0; + border-bottom: 0; + box-shadow: none; + font-size: 1rem; } + viewswitcher button:not(:checked):not(:hover) { + background: transparent; } + viewswitcher button:not(:only-child):not(:last-child) { + border-right-width: 0px; } + viewswitcher button:not(only-child):first-child:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):not(:hover) { + border-left-color: transparent; } + viewswitcher button:not(only-child):last-child:not(:checked):not(:hover) { + border-right-color: transparent; } + viewswitcher button:not(:checked):hover:not(:backdrop) { + background-image: image(lighter(#23252e)); } + viewswitcher button:not(only-child):first-child:not(:checked):hover, viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { + border-left-color: shade(#0d0e11, 1.15); } + viewswitcher button:not(only-child):last-child:not(:checked):hover { + border-right-color: shade(#0d0e11, 1.15); } + viewswitcher button:not(:checked):hover:backdrop { + background-image: image(#23252e); } + headerbar viewswitcher button:not(:checked):hover:not(:backdrop) { + background-image: linear-gradient(to top, shade(alpha(#23252e, 0.7), 0.99) 2px, alpha(#23252e, 0.7)); } + headerbar viewswitcher button:not(:checked):not(only-child):first-child:hover, headerbar viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), headerbar viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { + border-left-color: #0d0e11; } + headerbar viewswitcher button:not(:checked):not(only-child):last-child:hover { + border-right-color: #0d0e11; } + headerbar viewswitcher button:not(:checked):hover:backdrop { + background-image: image(#23252e); } + viewswitcher button > stack > box.narrow { + font-size: 0.75rem; + padding-top: 7px; + padding-bottom: 5px; } + viewswitcher button > stack > box.narrow image, + viewswitcher button > stack > box.narrow label { + padding-left: 8px; + padding-right: 8px; } + viewswitcher button > stack > box.wide { + padding: 8px 12px; } + viewswitcher button > stack > box.wide label:dir(ltr) { + padding-right: 7px; } + viewswitcher button > stack > box.wide label:dir(rtl) { + padding-left: 7px; } + viewswitcher button > stack > box label.active { + font-weight: bold; } + viewswitcher button.needs-attention:active > stack > box label, viewswitcher button.needs-attention:checked > stack > box label { + animation: none; + background-image: none; } + viewswitcher button.needs-attention > stack > box label { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + background-position: right 0px, right 1px; } + viewswitcher button.needs-attention > stack > box label:backdrop { + background-size: 6px 6px, 0 0; } + viewswitcher button.needs-attention > stack > box label:dir(rtl) { + background-position: left 0px, left 1px; } + +viewswitcherbar actionbar > revealer > box { + padding: 0; } + +list.content, +list.content list { + background-color: transparent; } + +list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > row:not(:active):hover:not(.activatable):not(:selected) { + background-color: mix(#23252e, #272a34, 0.5); } + +list.content list.nested > row.activatable:not(:active):hover:not(:selected) { + background-color: mix(#eeeeec, #272a34, 0.95); } + +list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander row.header:not(:active):not(:hover):not(:selected), list.content > row.expander row.header:not(:active):hover:not(.activatable):not(:selected) { + background-color: #272a34; } + +list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander row.header.activatable:not(:active):hover:not(:selected) { + background-color: mix(#eeeeec, #272a34, 0.95); } + +list.content > row, +list.content > row list > row { + border-color: alpha(#0d0e11, 0.7); + border-style: solid; + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +list.content > row:not(:last-child) { + border-width: 1px 1px 0px 1px; } + +list.content > row:first-child, list.content > row.expander:first-child row.header, list.content > row.expander:checked, list.content > row.expander:checked row.header, list.content > row.expander:checked + row, list.content > row.expander:checked + row.expander row.header { + border-top-left-radius: 8px; + -gtk-outline-top-left-radius: 7px; + border-top-right-radius: 8px; + -gtk-outline-top-right-radius: 7px; } + +list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > row.expander:checked { + border-width: 1px; } + +list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { + border-bottom-left-radius: 8px; + -gtk-outline-bottom-left-radius: 7px; + border-bottom-right-radius: 8px; + -gtk-outline-bottom-right-radius: 7px; } + +list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row { + margin-top: 6px; } + +button.list-button:not(:active):not(:checked):not(:hover) { + background: none; + border: 1px solid alpha(#0d0e11, 0.5); + box-shadow: none; } + +window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar { + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar.selection-mode { + box-shadow: none; } + +window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.065); } + +window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized), +window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration, +window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration-overlay { + border-radius: 8px; } + * { outline-style: solid; outline-offset: -4px; diff --git a/share/themes/Kali-Light/gtk-3.0/gtk.css b/share/themes/Kali-Light/gtk-3.0/gtk.css index b7e63634..a72c0c69 100644 --- a/share/themes/Kali-Light/gtk-3.0/gtk.css +++ b/share/themes/Kali-Light/gtk-3.0/gtk.css @@ -4768,6 +4768,332 @@ popover.emoji-completion contents row box { popover.emoji-completion .emoji:hover { background: white; } +/*************************** + * Check and Radio buttons * + ***************************/ +row label.subtitle { + font-size: smaller; + opacity: 0.55; + text-shadow: none; } + +row > box.header { + margin-left: 12px; + margin-right: 12px; + min-height: 50px; } + row > box.header > box.title { + margin-top: 8px; + margin-bottom: 8px; } + +row.expander { + background-color: transparent; } + row.expander list.nested > row { + background-color: alpha(#ffffff, 0.5); + border-color: alpha(#d9d9d9, 0.7); + border-style: solid; + border-width: 1px 0px 0px 0px; } + row.expander image.expander-row-arrow { + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + row.expander:checked image.expander-row-arrow { + -gtk-icon-transform: rotate(0turn); } + row.expander:not(:checked) image.expander-row-arrow { + opacity: 0.55; + text-shadow: none; } + row.expander:not(:checked) image.expander-row-arrow:dir(ltr) { + -gtk-icon-transform: rotate(-0.25turn); } + row.expander:not(:checked) image.expander-row-arrow:dir(rtl) { + -gtk-icon-transform: rotate(0.25turn); } + row.expander:checked image.expander-row-arrow:not(:disabled) { + color: #2777ff; } + row.expander image.expander-row-arrow:disabled { + color: #aeb0b6; } + +deck > dimming, +leaflet > dimming { + background: rgba(0, 0, 0, 0.12); } + +deck > border, +leaflet > border { + min-width: 1px; + min-height: 1px; + background: #d9d9d9; } + +deck > shadow, +leaflet > shadow { + min-width: 56px; + min-height: 56px; } + deck > shadow.left, + leaflet > shadow.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); } + deck > shadow.right, + leaflet > shadow.right { + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); } + deck > shadow.up, + leaflet > shadow.up { + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); } + deck > shadow.down, + leaflet > shadow.down { + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); } + +deck > outline, +leaflet > outline { + min-width: 1px; + min-height: 1px; + background: transparent; } + +avatar { + border-radius: 9999px; + -gtk-outline-radius: 9999px; + font-weight: bold; } + avatar.color1 { + background-image: linear-gradient(#83b6ec, #337fdc); + color: #cfe1f5; } + avatar.color2 { + background-image: linear-gradient(#7ad9f1, #0f9ac8); + color: #caeaf2; } + avatar.color3 { + background-image: linear-gradient(#8de6b1, #29ae74); + color: #cef8d8; } + avatar.color4 { + background-image: linear-gradient(#b5e98a, #6ab85b); + color: #e6f9d7; } + avatar.color5 { + background-image: linear-gradient(#f8e359, #d29d09); + color: #f9f4e1; } + avatar.color6 { + background-image: linear-gradient(#ffcb62, #d68400); + color: #ffead1; } + avatar.color7 { + background-image: linear-gradient(#ffa95a, #ed5b00); + color: #ffe5c5; } + avatar.color8 { + background-image: linear-gradient(#f78773, #e62d42); + color: #f8d2ce; } + avatar.color9 { + background-image: linear-gradient(#e973ab, #e33b6a); + color: #fac7de; } + avatar.color10 { + background-image: linear-gradient(#cb78d4, #9945b5); + color: #e7c2e8; } + avatar.color11 { + background-image: linear-gradient(#9e91e8, #7a59ca); + color: #d5d2f5; } + avatar.color12 { + background-image: linear-gradient(#e3cf9c, #b08952); + color: #f2eade; } + avatar.color13 { + background-image: linear-gradient(#be916d, #785336); + color: #e5d6ca; } + avatar.color14 { + background-image: linear-gradient(#c0bfbc, #6e6d71); + color: #d8d7d3; } + avatar.contrasted { + color: #fff; } + +viewswitchertitle viewswitcher { + margin-left: 12px; + margin-right: 12px; } + +/*************************** + * Check and Radio buttons * + ***************************/ +popover.combo list { + min-width: 200px; } + +window.csd.unified:not(.solid-csd) headerbar { + border-radius: 0; } + +.windowhandle, .windowhandle * { + -GtkWidget-window-dragging: true; } + +popover.combo { + padding: 0px; } + popover.combo list { + border-style: none; + background-color: transparent; } + popover.combo list > row { + padding: 0px 12px 0px 12px; + min-height: 50px; } + popover.combo list > row:not(:last-child) { + border-bottom: 1px solid alpha(#d9d9d9, 0.5); } + popover.combo list > row:first-child { + border-top-left-radius: 8px; + -gtk-outline-top-left-radius: 7px; + border-top-right-radius: 8px; + -gtk-outline-top-right-radius: 7px; } + popover.combo list > row:last-child { + border-bottom-left-radius: 8px; + -gtk-outline-bottom-left-radius: 7px; + border-bottom-right-radius: 8px; + -gtk-outline-bottom-right-radius: 7px; } + popover.combo overshoot.top { + border-top-left-radius: 8px; + -gtk-outline-top-left-radius: 7px; + border-top-right-radius: 8px; + -gtk-outline-top-right-radius: 7px; } + popover.combo overshoot.bottom { + border-bottom-left-radius: 8px; + -gtk-outline-bottom-left-radius: 7px; + border-bottom-right-radius: 8px; + -gtk-outline-bottom-right-radius: 7px; } + popover.combo scrollbar.vertical { + padding-top: 2px; + padding-bottom: 2px; } + popover.combo scrollbar.vertical:dir(ltr) { + border-top-right-radius: 8px; + -gtk-outline-top-right-radius: 7px; + border-bottom-right-radius: 8px; + -gtk-outline-bottom-right-radius: 7px; } + popover.combo scrollbar.vertical:dir(rtl) { + border-top-left-radius: 8px; + -gtk-outline-top-left-radius: 7px; + border-bottom-left-radius: 8px; + -gtk-outline-bottom-left-radius: 7px; } + +row.expander { + padding: 0px; } + row.expander image.expander-row-arrow:dir(ltr) { + margin-left: 6px; } + row.expander image.expander-row-arrow:dir(rtl) { + margin-right: 6px; } + +keypad .digit { + font-size: 200%; + font-weight: bold; } + +keypad .letters { + font-size: 70%; } + +keypad .symbol { + font-size: 160%; } + +viewswitcher, viewswitcher button { + margin: 0; + padding: 0; } + +viewswitcher button { + border-radius: 0; + border-top: 0; + border-bottom: 0; + box-shadow: none; + font-size: 1rem; } + viewswitcher button:not(:checked):not(:hover) { + background: transparent; } + viewswitcher button:not(:only-child):not(:last-child) { + border-right-width: 0px; } + viewswitcher button:not(only-child):first-child:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):not(:hover) { + border-left-color: transparent; } + viewswitcher button:not(only-child):last-child:not(:checked):not(:hover) { + border-right-color: transparent; } + viewswitcher button:not(:checked):hover:not(:backdrop) { + background-image: image(lighter(#ffffff)); } + viewswitcher button:not(only-child):first-child:not(:checked):hover, viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { + border-left-color: shade(#d9d9d9, 1.15); } + viewswitcher button:not(only-child):last-child:not(:checked):hover { + border-right-color: shade(#d9d9d9, 1.15); } + viewswitcher button:not(:checked):hover:backdrop { + background-image: image(#ffffff); } + headerbar viewswitcher button:not(:checked):hover:not(:backdrop) { + background-image: linear-gradient(to top, shade(alpha(#ffffff, 0.7), 0.96) 2px, alpha(#ffffff, 0.7)); } + headerbar viewswitcher button:not(:checked):not(only-child):first-child:hover, headerbar viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), headerbar viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { + border-left-color: #d9d9d9; } + headerbar viewswitcher button:not(:checked):not(only-child):last-child:hover { + border-right-color: #d9d9d9; } + headerbar viewswitcher button:not(:checked):hover:backdrop { + background-image: image(#ffffff); } + viewswitcher button > stack > box.narrow { + font-size: 0.75rem; + padding-top: 7px; + padding-bottom: 5px; } + viewswitcher button > stack > box.narrow image, + viewswitcher button > stack > box.narrow label { + padding-left: 8px; + padding-right: 8px; } + viewswitcher button > stack > box.wide { + padding: 8px 12px; } + viewswitcher button > stack > box.wide label:dir(ltr) { + padding-right: 7px; } + viewswitcher button > stack > box.wide label:dir(rtl) { + padding-left: 7px; } + viewswitcher button > stack > box label.active { + font-weight: bold; } + viewswitcher button.needs-attention:active > stack > box label, viewswitcher button.needs-attention:checked > stack > box label { + animation: none; + background-image: none; } + viewswitcher button.needs-attention > stack > box label { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + background-position: right 0px, right 1px; } + viewswitcher button.needs-attention > stack > box label:backdrop { + background-size: 6px 6px, 0 0; } + viewswitcher button.needs-attention > stack > box label:dir(rtl) { + background-position: left 0px, left 1px; } + +viewswitcherbar actionbar > revealer > box { + padding: 0; } + +list.content, +list.content list { + background-color: transparent; } + +list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > row:not(:active):hover:not(.activatable):not(:selected) { + background-color: mix(#ffffff, #fafafa, 0.5); } + +list.content list.nested > row.activatable:not(:active):hover:not(:selected) { + background-color: mix(#5c616c, #fafafa, 0.95); } + +list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander row.header:not(:active):not(:hover):not(:selected), list.content > row.expander row.header:not(:active):hover:not(.activatable):not(:selected) { + background-color: #fafafa; } + +list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander row.header.activatable:not(:active):hover:not(:selected) { + background-color: mix(#5c616c, #fafafa, 0.95); } + +list.content > row, +list.content > row list > row { + border-color: alpha(#d9d9d9, 0.7); + border-style: solid; + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +list.content > row:not(:last-child) { + border-width: 1px 1px 0px 1px; } + +list.content > row:first-child, list.content > row.expander:first-child row.header, list.content > row.expander:checked, list.content > row.expander:checked row.header, list.content > row.expander:checked + row, list.content > row.expander:checked + row.expander row.header { + border-top-left-radius: 8px; + -gtk-outline-top-left-radius: 7px; + border-top-right-radius: 8px; + -gtk-outline-top-right-radius: 7px; } + +list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > row.expander:checked { + border-width: 1px; } + +list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { + border-bottom-left-radius: 8px; + -gtk-outline-bottom-left-radius: 7px; + border-bottom-right-radius: 8px; + -gtk-outline-bottom-right-radius: 7px; } + +list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row { + margin-top: 6px; } + +button.list-button:not(:active):not(:checked):not(:hover) { + background: none; + border: 1px solid alpha(#d9d9d9, 0.5); + box-shadow: none; } + +window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.7); } + window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar.selection-mode { + box-shadow: none; } + +window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.34); } + +window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized), +window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration, +window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration-overlay { + border-radius: 8px; } + * { outline-style: solid; outline-offset: -4px; diff --git a/src/themes/Kali/sass/gtk-dark.scss b/src/themes/Kali/sass/gtk-dark.scss index 59881c34..aaa5a86f 100644 --- a/src/themes/Kali/sass/gtk-dark.scss +++ b/src/themes/Kali/sass/gtk-dark.scss @@ -5,10 +5,12 @@ // - if you need to inverse a color function use the @if directive to match for dark $variant $variant: 'dark'; +$high-contrast:'false'; @import 'gtk-sass/_colors'; @import 'gtk-sass/upstream/_drawing'; @import 'gtk-sass/upstream/_common'; +@import 'gtk-sass/libhandy/Adwaita-base'; @import 'gtk-sass/_common-tweaks'; @import 'gtk-sass/_applications'; @import 'gtk-sass/upstream/_colors-public'; diff --git a/src/themes/Kali/sass/gtk-sass/libhandy/_Adwaita-base.scss b/src/themes/Kali/sass/gtk-sass/libhandy/_Adwaita-base.scss new file mode 100644 index 00000000..cc0b7542 --- /dev/null +++ b/src/themes/Kali/sass/gtk-sass/libhandy/_Adwaita-base.scss @@ -0,0 +1,336 @@ +// Include base styling. +@import 'fallback-base'; +@import 'shared-base'; + +// HdyComboRow + +popover.combo { + padding: 0px; + + list { + border-style: none; + background-color: transparent; + + > row { + padding: 0px 12px 0px 12px; + min-height: 50px; + + &:not(:last-child) { + border-bottom: 1px solid hdyalpha($borders_color, 0.5) + } + + &:first-child { + @include rounded-border(top); + } + + &:last-child { + @include rounded-border(bottom); + } + } + } + + @each $border in top, bottom { + overshoot.#{$border} { + @include rounded-border($border); + } + } + + scrollbar.vertical { + padding-top: 2px; + padding-bottom: 2px; + + &:dir(ltr) { + @include rounded-border(right); + } + + &:dir(rtl) { + @include rounded-border(left); + } + } +} + +// HdyExpanderRow + +row.expander { + padding: 0px; + + image.expander-row-arrow { + @include margin-start(6px); + } +} + +// HdyKeypad + +keypad { + .digit { + font-size: 200%; + font-weight: bold; + } + + .letters { + font-size: 70%; + } + + .symbol { + font-size: 160%; + } +} + +// HdyViewSwitcher + +viewswitcher { + &, & button { + margin: 0; + padding: 0; + } + + button { + border-radius: 0; + border-top: 0; + border-bottom: 0; + box-shadow: none; + font-size: 1rem; + + &:not(:checked):not(:hover) { + background: transparent; + } + + &:not(:only-child):not(:last-child) { + border-right-width: 0px; + } + + &:not(only-child):first-child:not(:checked):not(:hover), + &:not(:checked):not(:hover) + button:not(:checked):not(:hover) { + border-left-color: transparent; + } + + &:not(only-child):last-child:not(:checked):not(:hover) { + border-right-color: transparent; + } + + &:not(:checked):hover:not(:backdrop) { + background-image: image(lighter($bg_color)); + } + + &:not(only-child):first-child:not(:checked):hover, + &:not(:checked):hover + button:not(:checked):not(:hover), + &:not(:checked):not(:hover) + button:not(:checked):hover { + border-left-color: shade($borders_color, 1.15); + } + + &:not(only-child):last-child:not(:checked):hover { + border-right-color: shade($borders_color, 1.15); + } + + &:not(:checked):hover:backdrop { + background-image: image($bg_color); + } + + // View switcher in a header bar + headerbar &:not(:checked) { + &:hover:not(:backdrop) { + // Reimplementation of $button_fill from Adwaita. The colors are made + // only 70% visible to avoid the highlight to be too strong. + $c: hdyalpha($bg_color, 0.7); + $button_fill: if($variant == 'light', linear-gradient(to top, shade($c, 0.96) 2px, $c), + linear-gradient(to top, shade($c, 0.99) 2px, $c)) !global; + background-image: $button_fill; + } + + &:not(only-child):first-child:hover, + &:hover + button:not(:checked):not(:hover), + &:not(:hover) + button:not(:checked):hover { + border-left-color: $borders_color; + } + + &:not(only-child):last-child:hover { + border-right-color: $borders_color; + } + + &:hover:backdrop { + background-image: image($bg_color); + } + } + + // View switcher button + > stack > box { + &.narrow { + font-size: 0.75rem; + padding-top: 7px; + padding-bottom: 5px; + + image, + label { + padding-left: 8px; + padding-right: 8px; + } + } + + &.wide { + padding: 8px 12px; + + label { + &:dir(ltr) { + padding-right: 7px; + } + + &:dir(rtl) { + padding-left: 7px; + } + } + } + + label.active { + font-weight: bold; + } + } + + &.needs-attention { + &:active > stack > box label, + &:checked > stack > box label { + animation: none; + background-image: none; + } + + > stack > box label { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + background-position: right 0px, right 1px; + + &:backdrop { + background-size: 6px 6px, 0 0; + } + + &:dir(rtl) { + background-position: left 0px, left 1px; + } + } + } + } +} + +// HdyViewSwitcherBar + +viewswitcherbar actionbar > revealer > box { + padding: 0; +} + +// Content list + +list.content { + &, + list { + background-color: transparent; + } + + // Nested rows background + list.nested > row:not(:active) { + &:not(:hover):not(:selected), + &:hover:not(.activatable):not(:selected) { + background-color: hdymix($bg_color, $base_color, 0.5); + } + + &:hover.activatable:not(:selected) { + background-color: hdymix($fg_color, $base_color, 0.95); + } + } + + > row { + // Regular rows and expander header rows background + &:not(.expander):not(:active):not(:hover):not(:selected), + &:not(.expander):not(:active):hover:not(.activatable):not(:selected), + &.expander row.header:not(:active):not(:hover):not(:selected), + &.expander row.header:not(:active):hover:not(.activatable):not(:selected) { + background-color: $base_color; + } + + &:not(.expander):not(:active):hover.activatable:not(:selected), + &.expander row.header:not(:active):hover.activatable:not(:selected) { + background-color: hdymix($fg_color, $base_color, 0.95); + } + + &, + list > row { + border-color: hdyalpha($borders_color, 0.7); + border-style: solid; + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + // Top border + &:not(:last-child) { + border-width: 1px 1px 0px 1px; + } + + // Rounded top + &:first-child, + &.expander:first-child row.header, + &.expander:checked, + &.expander:checked row.header, + &.expander:checked + row, + &.expander:checked + row.expander row.header { + @include rounded-border(top); + } + + // Bottom border + &:last-child, + &.checked-expander-row-previous-sibling, + &.expander:checked { + border-width: 1px; + } + + // Rounded bottom + &:last-child, + &.checked-expander-row-previous-sibling, + &.expander:checked, + &.expander:not(:checked):last-child row.header, + &.expander:not(:checked).checked-expander-row-previous-sibling row.header, + &.expander.empty:checked row.header, + &.expander list.nested > row:last-child { + @include rounded-border(bottom); + } + + // Add space around expanded rows + &.expander:checked:not(:first-child), + &.expander:checked + row { + margin-top: 6px; + } + } +} + +// List button + +button.list-button:not(:active):not(:checked):not(:hover) { + background: none; + border: 1px solid hdyalpha($borders_color, 0.5); + box-shadow: none; +} + +// Unified window + +window.csd.unified:not(.solid-csd):not(.fullscreen) { + // Remove the sheen on headerbar... + headerbar { + box-shadow: inset 0 1px rgba(255, 255, 255, if($variant == 'light', 0.7, 0)); + + &.selection-mode { + box-shadow: none; + } + } + + // ...and add it on the window itself + > decoration-overlay { + // Use a white sheen instead of @borders, as it has to be neutral enough + // for any content and not just headerbar background + box-shadow: inset 0 1px rgba(255, 255, 255, if($variant == 'light', 0.34, 0.065)); + } + + &:not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) { + &, + > decoration, + > decoration-overlay { + border-radius: 8px; + } + } +} diff --git a/src/themes/Kali/sass/gtk-sass/libhandy/_definitions.scss b/src/themes/Kali/sass/gtk-sass/libhandy/_definitions.scss new file mode 100644 index 00000000..ed427a4c --- /dev/null +++ b/src/themes/Kali/sass/gtk-sass/libhandy/_definitions.scss @@ -0,0 +1,66 @@ +@import 'drawing'; + +@function hdyalpha($c, $a) { + @return unquote("alpha(#{$c}, #{$a})"); +} + +@function hdymix($c1, $c2, $r) { + @return unquote("mix(#{$c1}, #{$c2}, #{$r})"); +} + +$leaflet_dimming: rgba(0, 0, 0, if($variant == 'light', 0.12, 0.24)); +$leaflet_border: rgba(0, 0, 0, if($variant == 'light', 0.05, 0.2)); +$leaflet_outline: rgba(255, 255, 255, if($variant == 'light', 0.2, 0.05)); + +@if $high_contrast { + $leaflet_border: $borders_color; + $leaflet_outline: transparent; +} + +@mixin background-shadow($direction) { + background-image: + linear-gradient($direction, + rgba(0, 0, 0, if($variant == 'light', 0.05, 0.1)), + rgba(0, 0, 0, if($variant == 'light', 0.01, 0.02)) 40px, + rgba(0, 0, 0, 0) 56px), + linear-gradient($direction, + rgba(0, 0, 0, if($variant == 'light', 0.03, 0.06)), + rgba(0, 0, 0, if($variant == 'light', 0.01, 0.02)) 7px, + rgba(0, 0, 0, 0) 24px); +} + +// Makes the corners of the given border rounded. +// $border must be top, bottom, left, or right. +@mixin rounded-border($border) { + // The floors (top, bottom) and walls (left, right) of the corners matching + // $border. This is needed to easily form floor-wall pairs regardless of + // whether $border is a floor or a wall. + $corners: ( + 'top': (('top'), ('left', 'right')), + 'bottom': (('bottom'), ('left', 'right')), + 'left': (('top', 'bottom'), ('left')), + 'right': (('top', 'bottom'), ('right')), + ); + + @if not map-get($corners, $border) { + @error "Unknown border type: #{$border}"; + } + + // Loop through the floors and walls of the corners of $border. + @each $floor in nth(map-get($corners, $border), 1) { + @each $wall in nth(map-get($corners, $border), 2) { + border-#{$floor}-#{$wall}-radius: 8px; + -gtk-outline-#{$floor}-#{$wall}-radius: 7px; + } + } +} + +@mixin margin-start($margin) { + &:dir(ltr) { + margin-left: $margin; + } + + &:dir(rtl) { + margin-right: $margin; + } +} diff --git a/src/themes/Kali/sass/gtk-sass/libhandy/_drawing.scss b/src/themes/Kali/sass/gtk-sass/libhandy/_drawing.scss new file mode 120000 index 00000000..e1593fbb --- /dev/null +++ b/src/themes/Kali/sass/gtk-sass/libhandy/_drawing.scss @@ -0,0 +1 @@ +../upstream/_drawing.scss \ No newline at end of file diff --git a/src/themes/Kali/sass/gtk-sass/libhandy/_fallback-base.scss b/src/themes/Kali/sass/gtk-sass/libhandy/_fallback-base.scss new file mode 100644 index 00000000..b821d956 --- /dev/null +++ b/src/themes/Kali/sass/gtk-sass/libhandy/_fallback-base.scss @@ -0,0 +1,146 @@ +@import 'definitions'; + +// HdyActionRow + +row { + label.subtitle { + font-size: smaller; + opacity: 0.55; + text-shadow: none; + } + + > box.header { + margin-left: 12px; + margin-right: 12px; + min-height: 50px; + + > box.title { + margin-top: 8px; + margin-bottom: 8px; + } + } +} + +// HdyExpanderRow + +row.expander { + // Drop transparent background on expander rows to let nested rows handle it, + // avoiding double highlights. + background-color: transparent; + + list.nested > row { + background-color: hdyalpha($bg_color, 0.5); + border-color: hdyalpha($borders_color, 0.7); + border-style: solid; + border-width: 1px 0px 0px 0px; + } + + // HdyExpanderRow arrow rotation + + image.expander-row-arrow { + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + &:checked image.expander-row-arrow { + -gtk-icon-transform: rotate(0turn); + } + + &:not(:checked) image.expander-row-arrow { + opacity: 0.55; + text-shadow: none; + + &:dir(ltr) { + -gtk-icon-transform: rotate(-0.25turn); + } + + &:dir(rtl) { + -gtk-icon-transform: rotate(0.25turn); + } + } + + &:checked image.expander-row-arrow:not(:disabled) { + color: $selected_bg_color; + } + + & image.expander-row-arrow:disabled { + color: $insensitive_fg_color; + } +} + +// Shadows + +deck, +leaflet { + > dimming { + background: $leaflet_dimming; + } + + > border { + min-width: 1px; + min-height: 1px; + background: $leaflet_border; + } + + > shadow { + min-width: 56px; + min-height: 56px; + + &.left { @include background-shadow(to right); } + &.right { @include background-shadow(to left); } + &.up { @include background-shadow(to bottom); } + &.down { @include background-shadow(to top); } + } + + > outline { + min-width: 1px; + min-height: 1px; + background: $leaflet_outline; + } +} + +// Avatar + +avatar { + border-radius: 9999px; + -gtk-outline-radius: 9999px; + font-weight: bold; + + // The list of colors to generate avatars. + // Each avatar color is represented by a font color, a gradient start color and a gradient stop color. + // There are 8 different colors for avtars in the list if you change the number of them you + // need to update the NUMBER_OF_COLORS in src/hdy-avatar.c. + // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)). + $avatarcolorlist: ( + (#cfe1f5, #83b6ec, #337fdc), // blue + (#caeaf2, #7ad9f1, #0f9ac8), // cyan + (#cef8d8, #8de6b1, #29ae74), // green + (#e6f9d7, #b5e98a, #6ab85b), // lime + (#f9f4e1, #f8e359, #d29d09), // yellow + (#ffead1, #ffcb62, #d68400), // gold + (#ffe5c5, #ffa95a, #ed5b00), // orange + (#f8d2ce, #f78773, #e62d42), // raspberry + (#fac7de, #e973ab, #e33b6a), // magenta + (#e7c2e8, #cb78d4, #9945b5), // purple + (#d5d2f5, #9e91e8, #7a59ca), // violet + (#f2eade, #e3cf9c, #b08952), // beige + (#e5d6ca, #be916d, #785336), // brown + (#d8d7d3, #c0bfbc, #6e6d71), // gray + ); + + @for $i from 1 through length($avatarcolorlist) { + &.color#{$i} { + $avatarcolor: nth($avatarcolorlist, $i); + background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3)); + color: nth($avatarcolor, 1); + } + } + + &.contrasted { color: #fff; } +} + +// HdyViewSwitcherTitle + +viewswitchertitle viewswitcher { + margin-left: 12px; + margin-right: 12px; +} diff --git a/src/themes/Kali/sass/gtk-sass/libhandy/_shared-base.scss b/src/themes/Kali/sass/gtk-sass/libhandy/_shared-base.scss new file mode 100644 index 00000000..6fec1a0a --- /dev/null +++ b/src/themes/Kali/sass/gtk-sass/libhandy/_shared-base.scss @@ -0,0 +1,21 @@ +@import 'definitions'; + +// HdyComboRow + +popover.combo list { + min-width: 200px; +} + +window.csd.unified:not(.solid-csd) { + // Since corners are masked, there's no need for round corners anymore + headerbar { + border-radius: 0; + } +} + +.windowhandle { + &, & * { + // This is the most reliable way to enable window dragging + -GtkWidget-window-dragging: true; + } +} diff --git a/src/themes/Kali/sass/gtk-sass/libhandy/sync.sh b/src/themes/Kali/sass/gtk-sass/libhandy/sync.sh new file mode 100755 index 00000000..23db21f0 --- /dev/null +++ b/src/themes/Kali/sass/gtk-sass/libhandy/sync.sh @@ -0,0 +1,20 @@ +#!/bin/sh + +GREEN='\033[0;32m' +YELLOW='\033[0;33m' +RESET='\033[0m' + +while read file; +do + echo + echo -e " $GREEN[ * ]$RESET Downloading file $file" + wget https://gitlab.gnome.org/GNOME/libhandy/-/raw/master/src/themes/$file --timestamping --quiet +done <<- EOF + _definitions.scss + _shared-base.scss + _Adwaita-base.scss + _fallback-base.scss +EOF +echo + +ln -rsfv ../upstream/_drawing.scss diff --git a/src/themes/Kali/sass/gtk.scss b/src/themes/Kali/sass/gtk.scss index b47f8f6a..9501b9b6 100644 --- a/src/themes/Kali/sass/gtk.scss +++ b/src/themes/Kali/sass/gtk.scss @@ -5,10 +5,12 @@ // - if you need to inverse a color function use the @if directive to match for dark $variant $variant: 'light'; +$high-contrast:'false'; @import 'gtk-sass/_colors'; @import 'gtk-sass/upstream/_drawing'; @import 'gtk-sass/upstream/_common'; +@import 'gtk-sass/libhandy/Adwaita-base'; @import 'gtk-sass/_common-tweaks'; @import 'gtk-sass/_applications'; @import 'gtk-sass/upstream/_colors-public';