From 98ba67b6d130933dcd084713839ed9fb9457da0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Tue, 12 Apr 2022 13:15:04 +0200 Subject: [PATCH] GTK4: add libhandy styles --- share/themes/Kali-Dark/gtk-4.0/gtk.css | 558 ++++++++++++++++++- share/themes/Kali-Light/gtk-4.0/gtk-dark.css | 558 ++++++++++++++++++- share/themes/Kali-Light/gtk-4.0/gtk.css | 558 ++++++++++++++++++- src/themes/Kali/sass/gtk4-dark.scss | 1 + src/themes/Kali/sass/gtk4.scss | 1 + 5 files changed, 1643 insertions(+), 33 deletions(-) diff --git a/share/themes/Kali-Dark/gtk-4.0/gtk.css b/share/themes/Kali-Dark/gtk-4.0/gtk.css index c5a217dd..5c13f7aa 100644 --- a/share/themes/Kali-Dark/gtk-4.0/gtk.css +++ b/share/themes/Kali-Dark/gtk-4.0/gtk.css @@ -3892,6 +3892,530 @@ menubutton arrow { menubutton arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } +/*************************** + * 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; } + +flap > dimming, +deck > dimming, +leaflet > dimming { + background: rgba(0, 0, 0, 0.24); } + +flap > border, +deck > border, +leaflet > border { + min-width: 1px; + min-height: 1px; + background: #0d0e11; } + +flap > shadow, +deck > shadow, +leaflet > shadow { + min-width: 56px; + min-height: 56px; } + flap > shadow.left, + 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); } + flap > shadow.right, + 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); } + flap > shadow.up, + 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); } + flap > shadow.down, + 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); } + +flap > outline, +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; } + avatar.image { + background: none; } + +viewswitchertitle viewswitcher { + margin-left: 12px; + margin-right: 12px; } + +statuspage > scrolledwindow > viewport > box { + margin: 36px 12px; } + statuspage > scrolledwindow > viewport > box > clamp:not(:last-child) > box { + margin-bottom: 36px; } + statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) { + margin-bottom: 36px; } + statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { + margin-bottom: 12px; } + +window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, +preferencespage > scrolledwindow > viewport > clamp { + margin: 0 12px; + transition: margin-bottom 200ms ease; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > list, + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > box > preferencesgroup, + preferencespage > scrolledwindow > viewport > clamp > list, + preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { + transition: margin-top 200ms ease; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, + preferencespage > scrolledwindow > viewport > clamp.small { + margin-bottom: 18px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > list, + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > box > preferencesgroup, + preferencespage > scrolledwindow > viewport > clamp.small > list, + preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { + margin-top: 18px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, + preferencespage > scrolledwindow > viewport > clamp.medium { + margin-bottom: 24px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > list, + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > box > preferencesgroup, + preferencespage > scrolledwindow > viewport > clamp.medium > list, + preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { + margin-top: 24px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, + preferencespage > scrolledwindow > viewport > clamp.large { + margin-bottom: 30px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > list, + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > box > preferencesgroup, + preferencespage > scrolledwindow > viewport > clamp.large > list, + preferencespage > scrolledwindow > viewport > clamp.large > box > preferencesgroup { + margin-top: 30px; } + +preferencesgroup > box > label:not(:first-child) { + margin-top: 6px; } + +preferencesgroup > box > box:not(:first-child) { + margin-top: 12px; } + +tabbar .tab-indicator:not(.clickable) { + background: none; + box-shadow: none; + border-color: transparent; } + +/*************************** + * 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:not(:active):hover.activatable: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:not(.expander):not(:active):hover.activatable:not(:selected), list.content > row.expander row.header:not(:active):hover.activatable: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:not(:checked).checked-expander-row-previous-sibling 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; } + +statuspage > scrolledwindow > viewport > box > clamp > box > .icon { + color: rgba(238, 238, 236, 0.5); } + statuspage > scrolledwindow > viewport > box > clamp > box > .icon:backdrop { + color: rgba(136, 138, 141, 0.5); } + +tabbar .box { + min-height: 38px; + background: #0f1014; + border-bottom: 1px solid black; } + tabbar .box:backdrop { + background-color: #0f1014; + border-color: #0d0e11; } + +tabbar scrolledwindow.pinned undershoot { + border: 0 solid black; } + +tabbar scrolledwindow.pinned:dir(rtl) undershoot.left { + border-left-width: 1px; } + +tabbar scrolledwindow.pinned:dir(ltr) undershoot.right { + border-right-width: 1px; } + +tabbar scrolledwindow.pinned:backdrop undershoot { + border-color: #0d0e11; } + +tabbar scrolledwindow.pinned tabbox:dir(ltr) { + padding-right: 1px; + box-shadow: inset -1px 0 black; } + tabbar scrolledwindow.pinned tabbox:dir(ltr):backdrop { + box-shadow: inset -1px 0 #0d0e11; } + +tabbar scrolledwindow.pinned tabbox:dir(rtl) { + padding-left: 1px; + box-shadow: inset 1px 0 black; } + tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { + box-shadow: inset 1px 0 #0d0e11; } + +tabbar undershoot { + transition: none; } + tabbar undershoot.left { + background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 20px); } + tabbar undershoot.right { + background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 20px); } + +tabbar .needs-attention-left undershoot.left { + background: linear-gradient(to right, rgba(39, 119, 255, 0.7), rgba(39, 119, 255, 0.5) 1px, rgba(39, 119, 255, 0) 20px); } + +tabbar .needs-attention-right undershoot.right { + background: linear-gradient(to left, rgba(39, 119, 255, 0.7), rgba(39, 119, 255, 0.5) 1px, rgba(39, 119, 255, 0) 20px); } + +tabbar tab { + border-style: solid; + border-color: black; + border-width: 0 1px 0 1px; + transition: background 150ms ease-in-out; + background-color: #16171d; } + tabbar tab:checked { + background-color: #23252e; } + tabbar tab:checked:hover { + background-color: #292c37; } + tabbar tab:hover { + background-color: #1c1e25; } + tabbar tab:backdrop { + border-color: #0d0e11; + background-color: #16171d; } + tabbar tab:backdrop:checked { + background-color: #23252e; } + +tabbar .start-action, +tabbar .end-action { + background: #16171d; + border-color: black; + border-style: solid; + transition: background 150ms ease-in-out; } + tabbar .start-action:backdrop, + tabbar .end-action:backdrop { + border-color: #0d0e11; + background-color: #16171d; } + tabbar .start-action button, + tabbar .end-action button { + border: none; + border-radius: 0; } + +tabbar .start-action:dir(ltr), +tabbar .end-action:dir(rtl) { + border-right-width: 1px; } + tabbar .start-action:dir(ltr) > *, + tabbar .end-action:dir(rtl) > * { + margin-right: 1px; } + +tabbar .start-action:dir(rtl), +tabbar .end-action:dir(ltr) { + border-left-width: 1px; } + tabbar .start-action:dir(rtl) > *, + tabbar .end-action:dir(ltr) > * { + margin-left: 1px; } + +.tab-drag-icon tab { + min-height: 26px; + background-color: #292c37; + box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(13, 14, 17, 0.9), inset 0 1px rgba(238, 238, 236, 0.07); + margin: 25px; } + +tabbar tab, +.tab-drag-icon tab { + padding: 6px; } + tabbar tab.needs-attention, + .tab-drag-icon tab.needs-attention { + background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), rgba(39, 119, 255, 0.2) 15%, rgba(39, 119, 255, 0) 15%); } + tabbar tab .tab-close-button, + tabbar tab .tab-indicator, + .tab-drag-icon tab .tab-close-button, + .tab-drag-icon tab .tab-indicator { + padding: 0; + margin: 0; + min-width: 24px; + min-height: 24px; + border-radius: 99px; + border: none; + box-shadow: none; + -gtk-icon-shadow: none; + text-shadow: none; + background: none; } + tabbar tab .tab-close-button:hover, + tabbar tab .tab-indicator.clickable:hover, + .tab-drag-icon tab .tab-close-button:hover, + .tab-drag-icon tab .tab-indicator.clickable:hover { + background: alpha(#eeeeec, 0.15); } + tabbar tab .tab-close-button:active, + tabbar tab .tab-indicator.clickable:active, + .tab-drag-icon tab .tab-close-button:active, + .tab-drag-icon tab .tab-indicator.clickable:active { + background: alpha(black, 0.2); } + /********** * Button * **********/ @@ -3934,7 +4458,9 @@ button.flat:not(.link):backdrop { border-color: transparent; background-color: transparent; background-image: none; - box-shadow: none; } + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } button.image-button { @@ -4050,10 +4576,11 @@ check:indeterminate:not(:backdrop) { switch slider, scale slider { color: #eeeeec; - outline-color: rgba(39, 119, 255, 0.7); + outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; + border-bottom-color: black; background-image: image(#323643); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); border-color: black; } switch:hover slider, switch slider:active, scale slider:active { @@ -4113,6 +4640,7 @@ headerbar { min-height: 40px; border-color: black; background: #0d0e11 -gtk-scaled(url("assets/kali-headerbar-logo-dark.png"), url("assets/kali-headerbar-logo-dark@2.png")), linear-gradient(to top, #16171d, #1a1c23); + box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); background-repeat: no-repeat; background-position: left; } @@ -4147,10 +4675,11 @@ treeview.view { border-top-color: #0d0e11; } treeview.view header button { color: #eeeeec; - outline-color: rgba(39, 119, 255, 0.7); + outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; + border-bottom-color: black; background-image: image(#323643); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); margin-left: -1px; } treeview.view header button:hover, treeview.view header button:active { border-color: #0d0e11; } @@ -4181,9 +4710,11 @@ notebook > header { notebook > header.left > tabs > tab.reorderable-page:hover, notebook > header.right > tabs > tab:hover, notebook > header.right > tabs > tab.reorderable-page:hover { color: #eeeeec; + outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; - background-image: linear-gradient(to top, #1e2128 20%, #20232b 90%); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); + border-bottom-color: black; + background-image: linear-gradient(to top, #20232b, #252831 1px); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); transition-duration: 50ms; } notebook > header.top > tabs > tab:hover:backdrop, notebook > header.top > tabs > tab.reorderable-page:hover:backdrop, notebook > header.bottom > tabs > tab:hover:backdrop, @@ -4193,17 +4724,20 @@ notebook > header { border-color: transparent; background-color: transparent; background-image: none; - box-shadow: none; } + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } notebook > header.top > tabs > tab:checked, notebook > header.top > tabs > tab.reorderable-page:checked, notebook > header.bottom > tabs > tab:checked, notebook > header.bottom > tabs > tab.reorderable-page:checked, notebook > header.left > tabs > tab:checked, notebook > header.left > tabs > tab.reorderable-page:checked, notebook > header.right > tabs > tab:checked, notebook > header.right > tabs > tab.reorderable-page:checked { color: #eeeeec; - outline-color: rgba(39, 119, 255, 0.7); + outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; + border-bottom-color: black; background-image: image(#323643); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } notebook > header.top > tabs > tab:checked:backdrop, notebook > header.top > tabs > tab.reorderable-page:checked:backdrop, notebook > header.bottom > tabs > tab:checked:backdrop, notebook > header.bottom > tabs > tab.reorderable-page:checked:backdrop, notebook > header.left > tabs > tab:checked:backdrop, @@ -4212,7 +4746,9 @@ notebook > header { color: #888a8d; border-color: #0d0e11; background-image: image(#23252e); - box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); transition: 200ms ease-out; } notebook > header.top > tabs > tab:backdrop, notebook > header.top > tabs > tab.reorderable-page:backdrop, notebook > header.bottom > tabs > tab:backdrop, diff --git a/share/themes/Kali-Light/gtk-4.0/gtk-dark.css b/share/themes/Kali-Light/gtk-4.0/gtk-dark.css index c5a217dd..5c13f7aa 100644 --- a/share/themes/Kali-Light/gtk-4.0/gtk-dark.css +++ b/share/themes/Kali-Light/gtk-4.0/gtk-dark.css @@ -3892,6 +3892,530 @@ menubutton arrow { menubutton arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } +/*************************** + * 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; } + +flap > dimming, +deck > dimming, +leaflet > dimming { + background: rgba(0, 0, 0, 0.24); } + +flap > border, +deck > border, +leaflet > border { + min-width: 1px; + min-height: 1px; + background: #0d0e11; } + +flap > shadow, +deck > shadow, +leaflet > shadow { + min-width: 56px; + min-height: 56px; } + flap > shadow.left, + 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); } + flap > shadow.right, + 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); } + flap > shadow.up, + 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); } + flap > shadow.down, + 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); } + +flap > outline, +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; } + avatar.image { + background: none; } + +viewswitchertitle viewswitcher { + margin-left: 12px; + margin-right: 12px; } + +statuspage > scrolledwindow > viewport > box { + margin: 36px 12px; } + statuspage > scrolledwindow > viewport > box > clamp:not(:last-child) > box { + margin-bottom: 36px; } + statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) { + margin-bottom: 36px; } + statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { + margin-bottom: 12px; } + +window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, +preferencespage > scrolledwindow > viewport > clamp { + margin: 0 12px; + transition: margin-bottom 200ms ease; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > list, + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > box > preferencesgroup, + preferencespage > scrolledwindow > viewport > clamp > list, + preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { + transition: margin-top 200ms ease; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, + preferencespage > scrolledwindow > viewport > clamp.small { + margin-bottom: 18px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > list, + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > box > preferencesgroup, + preferencespage > scrolledwindow > viewport > clamp.small > list, + preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { + margin-top: 18px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, + preferencespage > scrolledwindow > viewport > clamp.medium { + margin-bottom: 24px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > list, + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > box > preferencesgroup, + preferencespage > scrolledwindow > viewport > clamp.medium > list, + preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { + margin-top: 24px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, + preferencespage > scrolledwindow > viewport > clamp.large { + margin-bottom: 30px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > list, + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > box > preferencesgroup, + preferencespage > scrolledwindow > viewport > clamp.large > list, + preferencespage > scrolledwindow > viewport > clamp.large > box > preferencesgroup { + margin-top: 30px; } + +preferencesgroup > box > label:not(:first-child) { + margin-top: 6px; } + +preferencesgroup > box > box:not(:first-child) { + margin-top: 12px; } + +tabbar .tab-indicator:not(.clickable) { + background: none; + box-shadow: none; + border-color: transparent; } + +/*************************** + * 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:not(:active):hover.activatable: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:not(.expander):not(:active):hover.activatable:not(:selected), list.content > row.expander row.header:not(:active):hover.activatable: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:not(:checked).checked-expander-row-previous-sibling 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; } + +statuspage > scrolledwindow > viewport > box > clamp > box > .icon { + color: rgba(238, 238, 236, 0.5); } + statuspage > scrolledwindow > viewport > box > clamp > box > .icon:backdrop { + color: rgba(136, 138, 141, 0.5); } + +tabbar .box { + min-height: 38px; + background: #0f1014; + border-bottom: 1px solid black; } + tabbar .box:backdrop { + background-color: #0f1014; + border-color: #0d0e11; } + +tabbar scrolledwindow.pinned undershoot { + border: 0 solid black; } + +tabbar scrolledwindow.pinned:dir(rtl) undershoot.left { + border-left-width: 1px; } + +tabbar scrolledwindow.pinned:dir(ltr) undershoot.right { + border-right-width: 1px; } + +tabbar scrolledwindow.pinned:backdrop undershoot { + border-color: #0d0e11; } + +tabbar scrolledwindow.pinned tabbox:dir(ltr) { + padding-right: 1px; + box-shadow: inset -1px 0 black; } + tabbar scrolledwindow.pinned tabbox:dir(ltr):backdrop { + box-shadow: inset -1px 0 #0d0e11; } + +tabbar scrolledwindow.pinned tabbox:dir(rtl) { + padding-left: 1px; + box-shadow: inset 1px 0 black; } + tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { + box-shadow: inset 1px 0 #0d0e11; } + +tabbar undershoot { + transition: none; } + tabbar undershoot.left { + background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 20px); } + tabbar undershoot.right { + background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 20px); } + +tabbar .needs-attention-left undershoot.left { + background: linear-gradient(to right, rgba(39, 119, 255, 0.7), rgba(39, 119, 255, 0.5) 1px, rgba(39, 119, 255, 0) 20px); } + +tabbar .needs-attention-right undershoot.right { + background: linear-gradient(to left, rgba(39, 119, 255, 0.7), rgba(39, 119, 255, 0.5) 1px, rgba(39, 119, 255, 0) 20px); } + +tabbar tab { + border-style: solid; + border-color: black; + border-width: 0 1px 0 1px; + transition: background 150ms ease-in-out; + background-color: #16171d; } + tabbar tab:checked { + background-color: #23252e; } + tabbar tab:checked:hover { + background-color: #292c37; } + tabbar tab:hover { + background-color: #1c1e25; } + tabbar tab:backdrop { + border-color: #0d0e11; + background-color: #16171d; } + tabbar tab:backdrop:checked { + background-color: #23252e; } + +tabbar .start-action, +tabbar .end-action { + background: #16171d; + border-color: black; + border-style: solid; + transition: background 150ms ease-in-out; } + tabbar .start-action:backdrop, + tabbar .end-action:backdrop { + border-color: #0d0e11; + background-color: #16171d; } + tabbar .start-action button, + tabbar .end-action button { + border: none; + border-radius: 0; } + +tabbar .start-action:dir(ltr), +tabbar .end-action:dir(rtl) { + border-right-width: 1px; } + tabbar .start-action:dir(ltr) > *, + tabbar .end-action:dir(rtl) > * { + margin-right: 1px; } + +tabbar .start-action:dir(rtl), +tabbar .end-action:dir(ltr) { + border-left-width: 1px; } + tabbar .start-action:dir(rtl) > *, + tabbar .end-action:dir(ltr) > * { + margin-left: 1px; } + +.tab-drag-icon tab { + min-height: 26px; + background-color: #292c37; + box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(13, 14, 17, 0.9), inset 0 1px rgba(238, 238, 236, 0.07); + margin: 25px; } + +tabbar tab, +.tab-drag-icon tab { + padding: 6px; } + tabbar tab.needs-attention, + .tab-drag-icon tab.needs-attention { + background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), rgba(39, 119, 255, 0.2) 15%, rgba(39, 119, 255, 0) 15%); } + tabbar tab .tab-close-button, + tabbar tab .tab-indicator, + .tab-drag-icon tab .tab-close-button, + .tab-drag-icon tab .tab-indicator { + padding: 0; + margin: 0; + min-width: 24px; + min-height: 24px; + border-radius: 99px; + border: none; + box-shadow: none; + -gtk-icon-shadow: none; + text-shadow: none; + background: none; } + tabbar tab .tab-close-button:hover, + tabbar tab .tab-indicator.clickable:hover, + .tab-drag-icon tab .tab-close-button:hover, + .tab-drag-icon tab .tab-indicator.clickable:hover { + background: alpha(#eeeeec, 0.15); } + tabbar tab .tab-close-button:active, + tabbar tab .tab-indicator.clickable:active, + .tab-drag-icon tab .tab-close-button:active, + .tab-drag-icon tab .tab-indicator.clickable:active { + background: alpha(black, 0.2); } + /********** * Button * **********/ @@ -3934,7 +4458,9 @@ button.flat:not(.link):backdrop { border-color: transparent; background-color: transparent; background-image: none; - box-shadow: none; } + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } button.image-button { @@ -4050,10 +4576,11 @@ check:indeterminate:not(:backdrop) { switch slider, scale slider { color: #eeeeec; - outline-color: rgba(39, 119, 255, 0.7); + outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; + border-bottom-color: black; background-image: image(#323643); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); border-color: black; } switch:hover slider, switch slider:active, scale slider:active { @@ -4113,6 +4640,7 @@ headerbar { min-height: 40px; border-color: black; background: #0d0e11 -gtk-scaled(url("assets/kali-headerbar-logo-dark.png"), url("assets/kali-headerbar-logo-dark@2.png")), linear-gradient(to top, #16171d, #1a1c23); + box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); background-repeat: no-repeat; background-position: left; } @@ -4147,10 +4675,11 @@ treeview.view { border-top-color: #0d0e11; } treeview.view header button { color: #eeeeec; - outline-color: rgba(39, 119, 255, 0.7); + outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; + border-bottom-color: black; background-image: image(#323643); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); margin-left: -1px; } treeview.view header button:hover, treeview.view header button:active { border-color: #0d0e11; } @@ -4181,9 +4710,11 @@ notebook > header { notebook > header.left > tabs > tab.reorderable-page:hover, notebook > header.right > tabs > tab:hover, notebook > header.right > tabs > tab.reorderable-page:hover { color: #eeeeec; + outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; - background-image: linear-gradient(to top, #1e2128 20%, #20232b 90%); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); + border-bottom-color: black; + background-image: linear-gradient(to top, #20232b, #252831 1px); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); transition-duration: 50ms; } notebook > header.top > tabs > tab:hover:backdrop, notebook > header.top > tabs > tab.reorderable-page:hover:backdrop, notebook > header.bottom > tabs > tab:hover:backdrop, @@ -4193,17 +4724,20 @@ notebook > header { border-color: transparent; background-color: transparent; background-image: none; - box-shadow: none; } + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } notebook > header.top > tabs > tab:checked, notebook > header.top > tabs > tab.reorderable-page:checked, notebook > header.bottom > tabs > tab:checked, notebook > header.bottom > tabs > tab.reorderable-page:checked, notebook > header.left > tabs > tab:checked, notebook > header.left > tabs > tab.reorderable-page:checked, notebook > header.right > tabs > tab:checked, notebook > header.right > tabs > tab.reorderable-page:checked { color: #eeeeec; - outline-color: rgba(39, 119, 255, 0.7); + outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; + border-bottom-color: black; background-image: image(#323643); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(6, 7, 8, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); } notebook > header.top > tabs > tab:checked:backdrop, notebook > header.top > tabs > tab.reorderable-page:checked:backdrop, notebook > header.bottom > tabs > tab:checked:backdrop, notebook > header.bottom > tabs > tab.reorderable-page:checked:backdrop, notebook > header.left > tabs > tab:checked:backdrop, @@ -4212,7 +4746,9 @@ notebook > header { color: #888a8d; border-color: #0d0e11; background-image: image(#23252e); - box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); transition: 200ms ease-out; } notebook > header.top > tabs > tab:backdrop, notebook > header.top > tabs > tab.reorderable-page:backdrop, notebook > header.bottom > tabs > tab:backdrop, diff --git a/share/themes/Kali-Light/gtk-4.0/gtk.css b/share/themes/Kali-Light/gtk-4.0/gtk.css index d2af4c3d..6c6dd885 100644 --- a/share/themes/Kali-Light/gtk-4.0/gtk.css +++ b/share/themes/Kali-Light/gtk-4.0/gtk.css @@ -3910,6 +3910,530 @@ menubutton arrow { menubutton arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } +/*************************** + * 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; } + +flap > dimming, +deck > dimming, +leaflet > dimming { + background: rgba(0, 0, 0, 0.12); } + +flap > border, +deck > border, +leaflet > border { + min-width: 1px; + min-height: 1px; + background: #d9d9d9; } + +flap > shadow, +deck > shadow, +leaflet > shadow { + min-width: 56px; + min-height: 56px; } + flap > shadow.left, + 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); } + flap > shadow.right, + 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); } + flap > shadow.up, + 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); } + flap > shadow.down, + 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); } + +flap > outline, +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; } + avatar.image { + background: none; } + +viewswitchertitle viewswitcher { + margin-left: 12px; + margin-right: 12px; } + +statuspage > scrolledwindow > viewport > box { + margin: 36px 12px; } + statuspage > scrolledwindow > viewport > box > clamp:not(:last-child) > box { + margin-bottom: 36px; } + statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) { + margin-bottom: 36px; } + statuspage > scrolledwindow > viewport > box > clamp > box > .title:not(:last-child) { + margin-bottom: 12px; } + +window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp, +preferencespage > scrolledwindow > viewport > clamp { + margin: 0 12px; + transition: margin-bottom 200ms ease; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > list, + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp > box > preferencesgroup, + preferencespage > scrolledwindow > viewport > clamp > list, + preferencespage > scrolledwindow > viewport > clamp > box > preferencesgroup { + transition: margin-top 200ms ease; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small, + preferencespage > scrolledwindow > viewport > clamp.small { + margin-bottom: 18px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > list, + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.small > box > preferencesgroup, + preferencespage > scrolledwindow > viewport > clamp.small > list, + preferencespage > scrolledwindow > viewport > clamp.small > box > preferencesgroup { + margin-top: 18px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium, + preferencespage > scrolledwindow > viewport > clamp.medium { + margin-bottom: 24px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > list, + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.medium > box > preferencesgroup, + preferencespage > scrolledwindow > viewport > clamp.medium > list, + preferencespage > scrolledwindow > viewport > clamp.medium > box > preferencesgroup { + margin-top: 24px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large, + preferencespage > scrolledwindow > viewport > clamp.large { + margin-bottom: 30px; } + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > list, + window.preferences > deck > deck > box > stack > stack > scrolledwindow > viewport > clamp.large > box > preferencesgroup, + preferencespage > scrolledwindow > viewport > clamp.large > list, + preferencespage > scrolledwindow > viewport > clamp.large > box > preferencesgroup { + margin-top: 30px; } + +preferencesgroup > box > label:not(:first-child) { + margin-top: 6px; } + +preferencesgroup > box > box:not(:first-child) { + margin-top: 12px; } + +tabbar .tab-indicator:not(.clickable) { + background: none; + box-shadow: none; + border-color: transparent; } + +/*************************** + * 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:not(:active):hover.activatable: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:not(.expander):not(:active):hover.activatable:not(:selected), list.content > row.expander row.header:not(:active):hover.activatable: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:not(:checked).checked-expander-row-previous-sibling 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; } + +statuspage > scrolledwindow > viewport > box > clamp > box > .icon { + color: rgba(92, 97, 108, 0.5); } + statuspage > scrolledwindow > viewport > box > clamp > box > .icon:backdrop { + color: rgba(174, 176, 182, 0.5); } + +tabbar .box { + min-height: 38px; + background: #d9d9d9; + border-bottom: 1px solid #c2c2c2; } + tabbar .box:backdrop { + background-color: #e8e8e8; + border-color: #d9d9d9; } + +tabbar scrolledwindow.pinned undershoot { + border: 0 solid #c2c2c2; } + +tabbar scrolledwindow.pinned:dir(rtl) undershoot.left { + border-left-width: 1px; } + +tabbar scrolledwindow.pinned:dir(ltr) undershoot.right { + border-right-width: 1px; } + +tabbar scrolledwindow.pinned:backdrop undershoot { + border-color: #d9d9d9; } + +tabbar scrolledwindow.pinned tabbox:dir(ltr) { + padding-right: 1px; + box-shadow: inset -1px 0 #c2c2c2; } + tabbar scrolledwindow.pinned tabbox:dir(ltr):backdrop { + box-shadow: inset -1px 0 #d9d9d9; } + +tabbar scrolledwindow.pinned tabbox:dir(rtl) { + padding-left: 1px; + box-shadow: inset 1px 0 #c2c2c2; } + tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { + box-shadow: inset 1px 0 #d9d9d9; } + +tabbar undershoot { + transition: none; } + tabbar undershoot.left { + background: linear-gradient(to right, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0) 20px); } + tabbar undershoot.right { + background: linear-gradient(to left, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0) 20px); } + +tabbar .needs-attention-left undershoot.left { + background: linear-gradient(to right, rgba(39, 119, 255, 0.7), rgba(39, 119, 255, 0.5) 1px, rgba(39, 119, 255, 0) 20px); } + +tabbar .needs-attention-right undershoot.right { + background: linear-gradient(to left, rgba(39, 119, 255, 0.7), rgba(39, 119, 255, 0.5) 1px, rgba(39, 119, 255, 0) 20px); } + +tabbar tab { + border-style: solid; + border-color: #c2c2c2; + border-width: 0 1px 0 1px; + transition: background 150ms ease-in-out; + background-color: #e0e0e0; } + tabbar tab:checked { + background-color: #f0f0f0; } + tabbar tab:checked:hover { + background-color: #f7f7f7; } + tabbar tab:hover { + background-color: #e8e8e8; } + tabbar tab:backdrop { + border-color: #d9d9d9; + background-color: #f0f0f0; } + tabbar tab:backdrop:checked { + background-color: #ffffff; } + +tabbar .start-action, +tabbar .end-action { + background: #e0e0e0; + border-color: #c2c2c2; + border-style: solid; + transition: background 150ms ease-in-out; } + tabbar .start-action:backdrop, + tabbar .end-action:backdrop { + border-color: #d9d9d9; + background-color: #f0f0f0; } + tabbar .start-action button, + tabbar .end-action button { + border: none; + border-radius: 0; } + +tabbar .start-action:dir(ltr), +tabbar .end-action:dir(rtl) { + border-right-width: 1px; } + tabbar .start-action:dir(ltr) > *, + tabbar .end-action:dir(rtl) > * { + margin-right: 1px; } + +tabbar .start-action:dir(rtl), +tabbar .end-action:dir(ltr) { + border-left-width: 1px; } + tabbar .start-action:dir(rtl) > *, + tabbar .end-action:dir(ltr) > * { + margin-left: 1px; } + +.tab-drag-icon tab { + min-height: 26px; + background-color: #f7f7f7; + box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.23), inset 0 1px rgba(255, 255, 255, 0.8); + margin: 25px; } + +tabbar tab, +.tab-drag-icon tab { + padding: 6px; } + tabbar tab.needs-attention, + .tab-drag-icon tab.needs-attention { + background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), rgba(39, 119, 255, 0.2) 15%, rgba(39, 119, 255, 0) 15%); } + tabbar tab .tab-close-button, + tabbar tab .tab-indicator, + .tab-drag-icon tab .tab-close-button, + .tab-drag-icon tab .tab-indicator { + padding: 0; + margin: 0; + min-width: 24px; + min-height: 24px; + border-radius: 99px; + border: none; + box-shadow: none; + -gtk-icon-shadow: none; + text-shadow: none; + background: none; } + tabbar tab .tab-close-button:hover, + tabbar tab .tab-indicator.clickable:hover, + .tab-drag-icon tab .tab-close-button:hover, + .tab-drag-icon tab .tab-indicator.clickable:hover { + background: alpha(#5c616c, 0.15); } + tabbar tab .tab-close-button:active, + tabbar tab .tab-indicator.clickable:active, + .tab-drag-icon tab .tab-close-button:active, + .tab-drag-icon tab .tab-indicator.clickable:active { + background: alpha(black, 0.2); } + /********** * Button * **********/ @@ -3952,7 +4476,9 @@ button.flat:not(.link):backdrop { border-color: transparent; background-color: transparent; background-image: none; - box-shadow: none; } + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } button.image-button { @@ -4068,10 +4594,11 @@ check:indeterminate:not(:backdrop) { switch slider, scale slider { color: #5c616c; - outline-color: rgba(39, 119, 255, 0.5); + outline-color: rgba(92, 97, 108, 0.3); border-color: #d9d9d9; + border-bottom-color: #c2c2c2; background-image: image(white); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px white, inset 0 -1px 0px rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07); border-color: #bababa; } switch:hover slider, switch slider:active, scale slider:active { @@ -4131,6 +4658,7 @@ headerbar { min-height: 40px; border-color: #cccccc; background: #f2f2f2 -gtk-scaled(url("assets/kali-headerbar-logo.png"), url("assets/kali-headerbar-logo@2.png")), linear-gradient(to top, #ededed, whitesmoke); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); box-shadow: 0 1px 4px rgba(204, 204, 204, 0.75); background-repeat: no-repeat; background-position: left; } @@ -4165,10 +4693,11 @@ treeview.view { border-top-color: #d9d9d9; } treeview.view header button { color: #5c616c; - outline-color: rgba(39, 119, 255, 0.5); + outline-color: rgba(92, 97, 108, 0.3); border-color: #d9d9d9; + border-bottom-color: #c2c2c2; background-image: image(white); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px white, inset 0 -1px 0px rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07); margin-left: -1px; } treeview.view header button:hover, treeview.view header button:active { border-color: #d9d9d9; } @@ -4199,9 +4728,11 @@ notebook > header { notebook > header.left > tabs > tab.reorderable-page:hover, notebook > header.right > tabs > tab:hover, notebook > header.right > tabs > tab.reorderable-page:hover { color: #5c616c; + outline-color: rgba(92, 97, 108, 0.3); border-color: #d9d9d9; - background-image: linear-gradient(to top, #d6d6d6, #ebebeb 1px); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07); + border-bottom-color: #c2c2c2; + background-image: image(whitesmoke); + box-shadow: inset 0 1px white, inset 0 -1px 0px rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07); transition-duration: 50ms; } notebook > header.top > tabs > tab:hover:backdrop, notebook > header.top > tabs > tab.reorderable-page:hover:backdrop, notebook > header.bottom > tabs > tab:hover:backdrop, @@ -4211,17 +4742,20 @@ notebook > header { border-color: transparent; background-color: transparent; background-image: none; - box-shadow: none; } + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } notebook > header.top > tabs > tab:checked, notebook > header.top > tabs > tab.reorderable-page:checked, notebook > header.bottom > tabs > tab:checked, notebook > header.bottom > tabs > tab.reorderable-page:checked, notebook > header.left > tabs > tab:checked, notebook > header.left > tabs > tab.reorderable-page:checked, notebook > header.right > tabs > tab:checked, notebook > header.right > tabs > tab.reorderable-page:checked { color: #5c616c; - outline-color: rgba(39, 119, 255, 0.5); + outline-color: rgba(92, 97, 108, 0.3); border-color: #d9d9d9; + border-bottom-color: #c2c2c2; background-image: image(white); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0px rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07); } + box-shadow: inset 0 1px white, inset 0 -1px 0px rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07); } notebook > header.top > tabs > tab:checked:backdrop, notebook > header.top > tabs > tab.reorderable-page:checked:backdrop, notebook > header.bottom > tabs > tab:checked:backdrop, notebook > header.bottom > tabs > tab.reorderable-page:checked:backdrop, notebook > header.left > tabs > tab:checked:backdrop, @@ -4230,7 +4764,9 @@ notebook > header { color: #aeb0b6; border-color: #d9d9d9; background-image: image(#ffffff); - box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); transition: 200ms ease-out; } notebook > header.top > tabs > tab:backdrop, notebook > header.top > tabs > tab.reorderable-page:backdrop, notebook > header.bottom > tabs > tab:backdrop, diff --git a/src/themes/Kali/sass/gtk4-dark.scss b/src/themes/Kali/sass/gtk4-dark.scss index 22fb3d48..22e1ad22 100644 --- a/src/themes/Kali/sass/gtk4-dark.scss +++ b/src/themes/Kali/sass/gtk4-dark.scss @@ -10,6 +10,7 @@ $high-contrast:'false'; @import 'common/_colors'; @import 'gtk4/upstream/_drawing'; @import 'gtk4/upstream/_common'; +@import 'gtk3/upstream/libhandy/Adwaita-base'; @import 'gtk4/_common-tweaks'; @import 'gtk4/_applications'; @import 'gtk4/upstream/_colors-public'; diff --git a/src/themes/Kali/sass/gtk4.scss b/src/themes/Kali/sass/gtk4.scss index c127ade6..b97d2637 100644 --- a/src/themes/Kali/sass/gtk4.scss +++ b/src/themes/Kali/sass/gtk4.scss @@ -10,6 +10,7 @@ $high-contrast:'false'; @import 'common/_colors'; @import 'gtk4/upstream/_drawing'; @import 'gtk4/upstream/_common'; +@import 'gtk3/upstream/libhandy/Adwaita-base'; @import 'gtk4/_common-tweaks'; @import 'gtk4/_applications'; @import 'gtk4/upstream/_colors-public';