diff --git a/share/themes/Kali-Dark/gtk-3.0/gtk.css b/share/themes/Kali-Dark/gtk-3.0/gtk.css index af170494..ba5d1cef 100644 --- a/share/themes/Kali-Dark/gtk-3.0/gtk.css +++ b/share/themes/Kali-Dark/gtk-3.0/gtk.css @@ -5245,6 +5245,76 @@ popover.background { .csd popover.background, popover.background { border-color: rgba(13, 14, 17, 0.75); } +/************* + * Notebooks * + *************/ +notebook > header { + border: 0; + padding: 0; + background-color: #1b1d24; } + notebook > header.top > tabs, notebook > header.bottom > tabs, notebook > header.left > tabs, notebook > header.right > tabs { + margin: 0; } + notebook > header.top > tabs > tab, + notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab, + notebook > header.bottom > tabs > tab.reorderable-page, notebook > header.left > tabs > tab, + notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab, + notebook > header.right > tabs > tab.reorderable-page { + border: 1px solid transparent; + margin: 3px; } + notebook > header.top > tabs > tab:hover, + notebook > header.top > tabs > tab.reorderable-page:hover, notebook > header.bottom > tabs > tab:hover, + notebook > header.bottom > tabs > tab.reorderable-page:hover, notebook > header.left > tabs > tab:hover, + 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; + border-bottom-color: black; + text-shadow: 0 -1px rgba(0, 0, 0, 0.825255); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.825255); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); + background-image: linear-gradient(to top, #20232b, #252831 1px); } + 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(238, 238, 236, 0.3); + border-color: #0d0e11; + border-bottom-color: black; + background-image: linear-gradient(to top, #20232b 2px, #23252e); + text-shadow: 0 -1px rgba(0, 0, 0, 0.873255); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873255); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); + background: #272a34; } + 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, + notebook > header.left > tabs > tab.reorderable-page:checked:backdrop, notebook > header.right > tabs > tab:checked:backdrop, + notebook > header.right > tabs > tab.reorderable-page:checked:backdrop { + color: #888a8d; + border-color: #16171d; + background-image: image(#23252e); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + notebook > header.top { + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } + notebook > header.bottom { + background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } + notebook > header.right { + background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } + notebook > header.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } + notebook > header tab { + border-radius: 4px; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + min-height: 24px; } + notebook > header tab button.flat { + margin-top: 1px; + margin-bottom: 1px; } + /************** * GtkInfoBar * **************/ 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 af170494..ba5d1cef 100644 --- a/share/themes/Kali-Light/gtk-3.0/gtk-dark.css +++ b/share/themes/Kali-Light/gtk-3.0/gtk-dark.css @@ -5245,6 +5245,76 @@ popover.background { .csd popover.background, popover.background { border-color: rgba(13, 14, 17, 0.75); } +/************* + * Notebooks * + *************/ +notebook > header { + border: 0; + padding: 0; + background-color: #1b1d24; } + notebook > header.top > tabs, notebook > header.bottom > tabs, notebook > header.left > tabs, notebook > header.right > tabs { + margin: 0; } + notebook > header.top > tabs > tab, + notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab, + notebook > header.bottom > tabs > tab.reorderable-page, notebook > header.left > tabs > tab, + notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab, + notebook > header.right > tabs > tab.reorderable-page { + border: 1px solid transparent; + margin: 3px; } + notebook > header.top > tabs > tab:hover, + notebook > header.top > tabs > tab.reorderable-page:hover, notebook > header.bottom > tabs > tab:hover, + notebook > header.bottom > tabs > tab.reorderable-page:hover, notebook > header.left > tabs > tab:hover, + 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; + border-bottom-color: black; + text-shadow: 0 -1px rgba(0, 0, 0, 0.825255); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.825255); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); + background-image: linear-gradient(to top, #20232b, #252831 1px); } + 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(238, 238, 236, 0.3); + border-color: #0d0e11; + border-bottom-color: black; + background-image: linear-gradient(to top, #20232b 2px, #23252e); + text-shadow: 0 -1px rgba(0, 0, 0, 0.873255); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873255); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27); + background: #272a34; } + 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, + notebook > header.left > tabs > tab.reorderable-page:checked:backdrop, notebook > header.right > tabs > tab:checked:backdrop, + notebook > header.right > tabs > tab.reorderable-page:checked:backdrop { + color: #888a8d; + border-color: #16171d; + background-image: image(#23252e); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + notebook > header.top { + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } + notebook > header.bottom { + background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } + notebook > header.right { + background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } + notebook > header.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } + notebook > header tab { + border-radius: 4px; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + min-height: 24px; } + notebook > header tab button.flat { + margin-top: 1px; + margin-bottom: 1px; } + /************** * GtkInfoBar * **************/ diff --git a/share/themes/Kali-Light/gtk-3.0/gtk.css b/share/themes/Kali-Light/gtk-3.0/gtk.css index b66b48ab..aa0e9931 100644 --- a/share/themes/Kali-Light/gtk-3.0/gtk.css +++ b/share/themes/Kali-Light/gtk-3.0/gtk.css @@ -5266,6 +5266,76 @@ popover.background { .csd popover.background, popover.background { border-color: rgba(0, 0, 0, 0.1); } +/************* + * Notebooks * + *************/ +notebook > header { + border: 0; + padding: 0; + background-color: #f2f2f2; } + notebook > header.top > tabs, notebook > header.bottom > tabs, notebook > header.left > tabs, notebook > header.right > tabs { + margin: 0; } + notebook > header.top > tabs > tab, + notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab, + notebook > header.bottom > tabs > tab.reorderable-page, notebook > header.left > tabs > tab, + notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab, + notebook > header.right > tabs > tab.reorderable-page { + border: 1px solid transparent; + margin: 3px; } + notebook > header.top > tabs > tab:hover, + notebook > header.top > tabs > tab.reorderable-page:hover, notebook > header.bottom > tabs > tab:hover, + notebook > header.bottom > tabs > tab.reorderable-page:hover, notebook > header.left > tabs > tab:hover, + 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; + border-bottom-color: #c2c2c2; + text-shadow: 0 1px rgba(255, 255, 255, 0.769231); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); + box-shadow: inset 0 1px white, inset 0 -1px 0 rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #ffffff, white 1px); } + 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(92, 97, 108, 0.3); + border-color: #d9d9d9; + border-bottom-color: #c2c2c2; + background-image: linear-gradient(to top, whitesmoke 2px, #ffffff); + text-shadow: 0 1px rgba(255, 255, 255, 0.769231); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); + box-shadow: inset 0 1px white, inset 0 -1px 0 rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07); + background: #fafafa; } + 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, + notebook > header.left > tabs > tab.reorderable-page:checked:backdrop, notebook > header.right > tabs > tab:checked:backdrop, + notebook > header.right > tabs > tab.reorderable-page:checked:backdrop { + color: #aeb0b6; + border-color: #e0e0e0; + background-image: image(#ffffff); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + notebook > header.top { + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } + notebook > header.bottom { + background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } + notebook > header.right { + background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } + notebook > header.left { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); } + notebook > header tab { + border-radius: 4px; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + min-height: 24px; } + notebook > header tab button.flat { + margin-top: 1px; + margin-bottom: 1px; } + /************** * GtkInfoBar * **************/ diff --git a/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss b/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss index 4f668c16..97e04fa0 100644 --- a/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss +++ b/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss @@ -214,6 +214,74 @@ popover.background { .csd &, & { border-color: if($variant=='light', transparentize(black, 0.9), transparentize($borders_color, 0.25)); } } +/************* + * Notebooks * + *************/ +notebook { + > header { + border: 0; + padding: 0; + background-color: $dark_fill; + + &.top, + &.bottom, + &.left, + &.right { + > tabs { + margin: 0; + + > tab, + > tab.reorderable-page { + border: 1px solid transparent; + margin: 3px; + + &:hover { @include button(hover); } + + &:checked { + @include button(normal); + background: $base_color; + + &:backdrop { @include button(backdrop); } + } + } + } + } + + $gradient: + rgba(black, 0), + rgba(black, 0) calc(100% - 2px), + rgba(black, 0.05) calc(100% - 1px), + rgba(black, 0.15); + + &.top { + background-image: linear-gradient(to bottom, $gradient); + } + + &.bottom { + background-image: linear-gradient(to top, $gradient); + } + + &.right { + background-image: linear-gradient(to left, $gradient); + } + + &.left { + background-image: linear-gradient(to right, $gradient); + } + + tab { + border-radius: $button_radius - 1px; + transition: $button_transition; + min-height: 24px; + + button.flat { + margin-top: 1px; + margin-bottom: 1px; + } + } + } +} + /************** * GtkInfoBar * **************/