diff --git a/share/themes/Kali-Dark/gtk-3.0/gtk.css b/share/themes/Kali-Dark/gtk-3.0/gtk.css index 10bbdd55..d1b3e41c 100644 --- a/share/themes/Kali-Dark/gtk-3.0/gtk.css +++ b/share/themes/Kali-Dark/gtk-3.0/gtk.css @@ -1,3 +1,6 @@ +/*************************** + * Check and Radio buttons * + ***************************/ @import url("applications/nautilus/Adwaita.css"); * { padding: 0; @@ -9,11 +12,11 @@ -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; - outline-color: alpha(currentColor,0.07); - outline-style: solid; - outline-offset: -2px; - outline-width: 2px; - -gtk-outline-radius: 6px; + outline-color: alpha(currentColor,0.3); + outline-style: dashed; + outline-offset: -3px; + outline-width: 1px; + -gtk-outline-radius: 3px; -gtk-secondary-caret-color: #2777ff; } /*************** @@ -475,7 +478,7 @@ button { text-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); } - notebook > header > tabs > arrow, button.sidebar-button, button.titlebutton, + notebook > header > tabs > arrow, button.sidebar-button, button.titlebutton, notebook > header > tabs > arrow.flat, button.flat.titlebutton, button.flat { border-color: transparent; background-color: transparent; @@ -484,11 +487,11 @@ button { text-shadow: none; -gtk-icon-shadow: none; transition: none; } - notebook > header > tabs > arrow:hover, button.sidebar-button:hover, button.titlebutton:hover, + notebook > header > tabs > arrow:hover, button.sidebar-button:hover, button.titlebutton:hover, notebook > header > tabs > arrow.flat:hover, button.flat.titlebutton:hover, button.flat:hover { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; } - notebook > header > tabs > arrow:hover:active, button.sidebar-button:hover:active, button.titlebutton:hover:active, + notebook > header > tabs > arrow:hover:active, button.sidebar-button:hover:active, button.titlebutton:hover:active, notebook > header > tabs > arrow.flat:hover:active, button.flat.titlebutton:hover:active, button.flat:hover:active { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook > header > tabs > arrow:hover, button.titlebutton:hover, @@ -509,11 +512,11 @@ button { outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; background-image: image(#0f1014); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; transition-duration: 50ms; } - notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, button.titlebutton:backdrop, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, + notebook > header > tabs > arrow:backdrop.flat, button.titlebutton:backdrop.flat, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, button:backdrop.flat, button:backdrop { border-color: #111317; @@ -523,13 +526,13 @@ button { box-shadow: inset 0 1px rgba(255, 255, 255, 0); transition: 200ms ease-out; -gtk-icon-effect: none; } - notebook > header > tabs > arrow:backdrop label, button.sidebar-button:backdrop label, button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, button.titlebutton:backdrop, notebook > header > tabs > arrow:backdrop label, button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, + notebook > header > tabs > arrow:backdrop.flat label, button.titlebutton:backdrop.flat label, notebook > header > tabs > arrow:backdrop.flat, button.titlebutton:backdrop.flat, notebook > header > tabs > arrow:backdrop label, button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, button:backdrop.flat label, button:backdrop.flat, button:backdrop label, button:backdrop { color: #898a8d; } - notebook > header > tabs > arrow:backdrop:active, button.sidebar-button:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.sidebar-button:backdrop:checked, button.titlebutton:backdrop:checked, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, + notebook > header > tabs > arrow:backdrop.flat:active, button.titlebutton:backdrop.flat:active, notebook > header > tabs > arrow:backdrop.flat:checked, button.titlebutton:backdrop.flat:checked, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, button:backdrop.flat:active, button:backdrop.flat:checked, button:backdrop:active, @@ -537,7 +540,7 @@ button { border-color: #111317; background-image: image(#1b1d23); box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - notebook > header > tabs > arrow:backdrop:active label, button.sidebar-button:backdrop:active label, button.titlebutton:backdrop:active label, notebook > header > tabs > arrow:backdrop:active, button.sidebar-button:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked label, button.sidebar-button:backdrop:checked label, button.titlebutton:backdrop:checked label, notebook > header > tabs > arrow:backdrop:checked, button.sidebar-button:backdrop:checked, button.titlebutton:backdrop:checked, notebook > header > tabs > arrow:backdrop:active label, button.titlebutton:backdrop:active label, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked label, button.titlebutton:backdrop:checked label, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, + notebook > header > tabs > arrow:backdrop.flat:active label, button.titlebutton:backdrop.flat:active label, notebook > header > tabs > arrow:backdrop.flat:active, button.titlebutton:backdrop.flat:active, notebook > header > tabs > arrow:backdrop.flat:checked label, button.titlebutton:backdrop.flat:checked label, notebook > header > tabs > arrow:backdrop.flat:checked, button.titlebutton:backdrop.flat:checked, notebook > header > tabs > arrow:backdrop:active label, button.titlebutton:backdrop:active label, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked label, button.titlebutton:backdrop:checked label, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, button:backdrop.flat:active label, button:backdrop.flat:active, button:backdrop.flat:checked label, @@ -547,7 +550,7 @@ button { button:backdrop:checked label, button:backdrop:checked { color: #898a8d; } - notebook > header > tabs > arrow:backdrop:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, + notebook > header > tabs > arrow:backdrop.flat:disabled, button.titlebutton:backdrop.flat:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, button:backdrop.flat:disabled, button:backdrop:disabled { border-color: #111317; @@ -555,13 +558,13 @@ button { text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - notebook > header > tabs > arrow:backdrop:disabled label, button.sidebar-button:backdrop:disabled label, button.titlebutton:backdrop:disabled label, notebook > header > tabs > arrow:backdrop:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled label, button.titlebutton:backdrop:disabled label, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, + notebook > header > tabs > arrow:backdrop.flat:disabled label, button.titlebutton:backdrop.flat:disabled label, notebook > header > tabs > arrow:backdrop.flat:disabled, button.titlebutton:backdrop.flat:disabled, notebook > header > tabs > arrow:backdrop:disabled label, button.titlebutton:backdrop:disabled label, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, button:backdrop.flat:disabled label, button:backdrop.flat:disabled, button:backdrop:disabled label, button:backdrop:disabled { color: #43495a; } - notebook > header > tabs > arrow:backdrop:disabled:active, button.sidebar-button:backdrop:disabled:active, button.titlebutton:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.sidebar-button:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, button.titlebutton:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:checked, + notebook > header > tabs > arrow:backdrop.flat:disabled:active, button.titlebutton:backdrop.flat:disabled:active, notebook > header > tabs > arrow:backdrop.flat:disabled:checked, button.titlebutton:backdrop.flat:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, button.titlebutton:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:checked, button:backdrop.flat:disabled:active, button:backdrop.flat:disabled:checked, button:backdrop:disabled:active, @@ -569,13 +572,13 @@ button { border-color: #111317; background-image: image(#1b1d23); box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - notebook > header > tabs > arrow:backdrop:disabled:active label, button.sidebar-button:backdrop:disabled:active label, button.titlebutton:backdrop:disabled:active label, notebook > header > tabs > arrow:backdrop:disabled:checked label, button.sidebar-button:backdrop:disabled:checked label, button.titlebutton:backdrop:disabled:checked label, notebook > header > tabs > arrow:backdrop:disabled:active label, button.titlebutton:backdrop:disabled:active label, notebook > header > tabs > arrow:backdrop:disabled:checked label, button.titlebutton:backdrop:disabled:checked label, + notebook > header > tabs > arrow:backdrop.flat:disabled:active label, button.titlebutton:backdrop.flat:disabled:active label, notebook > header > tabs > arrow:backdrop.flat:disabled:checked label, button.titlebutton:backdrop.flat:disabled:checked label, notebook > header > tabs > arrow:backdrop:disabled:active label, button.titlebutton:backdrop:disabled:active label, notebook > header > tabs > arrow:backdrop:disabled:checked label, button.titlebutton:backdrop:disabled:checked label, button:backdrop.flat:disabled:active label, button:backdrop.flat:disabled:checked label, button:backdrop:disabled:active label, button:backdrop:disabled:checked label { color: #43495a; } - notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, button.titlebutton:backdrop, notebook > header > tabs > arrow:disabled, button.sidebar-button:disabled, button.titlebutton:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, + notebook > header > tabs > arrow.flat:backdrop, button.flat.titlebutton:backdrop, notebook > header > tabs > arrow.flat:disabled, button.flat.titlebutton:disabled, notebook > header > tabs > arrow.flat:backdrop:disabled, button.flat.titlebutton:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { @@ -845,7 +848,7 @@ button.suggested-action { outline-color: rgba(255, 255, 255, 0.3); border-color: #005af3; background-image: image(#005cf8); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .selection-mode button.titlebutton:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { @@ -977,7 +980,7 @@ button.destructive-action { outline-color: rgba(255, 255, 255, 0.3); border-color: #790e0e; background-image: image(#7d0f0f); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } button.destructive-action:backdrop, button.destructive-action.flat:backdrop { @@ -1177,7 +1180,7 @@ button.circular { outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; background-image: image(#0f1014); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .inline-toolbar toolbutton > button:disabled { @@ -1229,31 +1232,27 @@ entry, .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button border-radius: 0; border-right-style: none; } -.linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > -entry:first-child, .inline-toolbar button:first-child, .linked > button:first-child, toolbar.inline-toolbar toolbutton:first-child > button.flat, -toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, filechooser .path-bar.linked > button:dir(ltr):first-child, filechooser .path-bar.linked > button:dir(rtl):last-child { +toolbar.inline-toolbar toolbutton:first-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > +entry:first-child, .inline-toolbar button:first-child, .linked > button:first-child, filechooser .path-bar.linked > button:dir(ltr):first-child, filechooser .path-bar.linked > button:dir(rtl):last-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: none; } -.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > -entry:last-child, .inline-toolbar button:last-child, .linked > button:last-child, toolbar.inline-toolbar toolbutton:last-child > button.flat, -toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, filechooser .path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > button:dir(rtl):first-child { +toolbar.inline-toolbar toolbutton:last-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > +entry:last-child, .inline-toolbar button:last-child, .linked > button:last-child, filechooser .path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > button:dir(rtl):first-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right-style: solid; } -.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > -entry:only-child, .inline-toolbar button:only-child, .linked > button:only-child, toolbar.inline-toolbar toolbutton:only-child > button.flat, -toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > combobox:only-child > box > button.combo { - border-radius: 5px; - border-style: solid; } - -filechooser .path-bar.linked > button:only-child { +toolbar.inline-toolbar toolbutton:only-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > +entry:only-child, .inline-toolbar button:only-child, .linked > button:only-child, filechooser .path-bar.linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo { border-radius: 5px; border-style: solid; } @@ -1266,11 +1265,13 @@ entry, .linked.vertical > button, .linked.vertical > button:hover, .linked.verti entry:first-child, .linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo { border-top-left-radius: 5px; border-top-right-radius: 5px; } + .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child, .linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; } + .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child, .linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo { border-radius: 5px; @@ -1335,88 +1336,69 @@ list row button.image-button:not(.flat) { outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; background-image: image(#0f1014); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } /********* * Links * *********/ -button:link > label, -button:visited > label, *:link, button:link, -button:visited { +button:link, +button:visited, button:link > label, +button:visited > label, *:link { color: #8db7ff; } - button:link > label:visited, - button:visited > label:visited, *:link:visited, - button:visited { + button:visited, button:link > label:visited, + button:visited > label:visited, *:link:visited { color: #5a97ff; } - *:selected button:link > label:visited, + *:selected button:visited, *:selected button:link > label:visited, *:selected button:visited > label:visited, - *:selected *:link:visited, - *:selected button:visited:link, - *:selected button:visited { + *:selected *:link:visited { color: #a9c9ff; } - button:link > label:hover, - button:visited > label:hover, *:link:hover, button:hover:link, - button:hover:visited { + button:hover:link, + button:hover:visited, button:link > label:hover, + button:visited > label:hover, *:link:hover { color: #c0d7ff; } - *:selected button:link > label:hover, - *:selected button:visited > label:hover, - *:selected *:link:hover, *:selected button:hover:link, - *:selected button:hover:visited { + *:selected button:hover:visited, *:selected button:link > label:hover, + *:selected button:visited > label:hover, + *:selected *:link:hover { color: #e9f1ff; } - button:link > label:active, - button:visited > label:active, *:link:active, button:active:link, - button:active:visited { + button:active:link, + button:active:visited, button:link > label:active, + button:visited > label:active, *:link:active { color: #8db7ff; } - *:selected button:link > label:active, - *:selected button:visited > label:active, - *:selected *:link:active, *:selected button:active:link, - *:selected button:active:visited { + *:selected button:active:visited, *:selected button:link > label:active, + *:selected button:visited > label:active, + *:selected *:link:active { color: #d4e4ff; } - button:link > label:disabled, - button:visited > label:disabled, button:link > label:disabled:backdrop, + button:disabled:link, + button:disabled:visited, button:link > label:disabled, + button:visited > label:disabled, button:disabled:backdrop:link, + button:disabled:backdrop:visited, button:link > label:disabled:backdrop, button:visited > label:disabled:backdrop, *:link:disabled, - button:disabled:link, - button:disabled:visited, - *:link:disabled:backdrop, - button:disabled:backdrop:link, - button:disabled:backdrop:visited { + *:link:disabled:backdrop { color: rgba(198, 198, 198, 0.8); } - button:link > label:backdrop:backdrop:hover, - button:visited > label:backdrop:backdrop:hover, button:link > label:backdrop:backdrop:hover:selected, - button:visited > label:backdrop:backdrop:hover:selected, button:link > label:backdrop, + button:backdrop:backdrop:hover:link, + button:backdrop:backdrop:hover:visited, button:link > label:backdrop:backdrop:hover, + button:visited > label:backdrop:backdrop:hover, button:backdrop:backdrop:hover:selected:link, + button:backdrop:backdrop:hover:selected:visited, button:link > label:backdrop:backdrop:hover:selected, + button:visited > label:backdrop:backdrop:hover:selected, button:backdrop:link, + button:backdrop:visited, button:link > label:backdrop, button:visited > label:backdrop, *:link:backdrop:backdrop:hover, - button:backdrop:backdrop:hover:link, - button:backdrop:backdrop:hover:visited, *:link:backdrop:backdrop:hover:selected, - button:backdrop:backdrop:hover:selected:link, - button:backdrop:backdrop:hover:selected:visited, - .selection-mode .titlebar:not(headerbar) .subtitle:backdrop:backdrop:hover:link, - .selection-mode.titlebar:not(headerbar) .subtitle:backdrop:backdrop:hover:link, - .selection-mode headerbar .subtitle:backdrop:backdrop:hover:link, - headerbar.selection-mode .subtitle:backdrop:backdrop:hover:link, - *:link:backdrop, - button:backdrop:link, - button:backdrop:visited { + *:link:backdrop { color: #2777ff; } - button:link > label:selected, - button:visited > label:selected, *:selected button:link > label, + .selection-mode .titlebar:not(headerbar) .subtitle:link, .selection-mode.titlebar:not(headerbar) .subtitle:link, + .selection-mode headerbar .subtitle:link, headerbar.selection-mode .subtitle:link, button:selected:link, + button:selected:visited, button:link > label:selected, + button:visited > label:selected, *:selected button:link, + *:selected button:visited, *:selected button:link > label, *:selected button:visited > label, *:link:selected, - button:selected:link, - button:selected:visited, - .selection-mode .titlebar:not(headerbar) .subtitle:link, - .selection-mode.titlebar:not(headerbar) .subtitle:link, - .selection-mode headerbar .subtitle:link, - headerbar.selection-mode .subtitle:link, - *:selected *:link, - *:selected button:link, - *:selected button:visited { + *:selected *:link { color: #d4e4ff; } button:link, @@ -1687,21 +1669,17 @@ searchbar > revealer > box { min-height: 40px; border-width: 0 0 1px; border-style: solid; - border-color: #2777ff; + border-color: black; border-radius: 0; - 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); + background: #0d0e11 linear-gradient(to top, #16171d, #1a1c23); box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); - background-repeat: no-repeat; - background-position: left; /* Darken switchbuttons for headerbars. issue #1588 */ /* hide the close button separator */ } .titlebar:backdrop:not(headerbar), headerbar:backdrop { border-color: #111317; background-color: #23252e; - background-image: -gtk-scaled(url("assets/kali-headerbar-logo-dark.png"), url("assets/kali-headerbar-logo-dark@2.png")); - background-repeat: no-repeat; - background-position: left; + background-image: none; box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); transition: 200ms ease-out; } .titlebar:not(headerbar) .title, @@ -1718,7 +1696,7 @@ searchbar > revealer > box { .titlebar:not(headerbar) button.toggle:checked, headerbar stackswitcher button:checked, headerbar button.toggle:checked { - background: image(#040405); + background: image(#0f1014); border-color: #060708; border-top-color: black; } .titlebar:not(headerbar) stackswitcher button:checked:backdrop, @@ -1789,7 +1767,7 @@ searchbar > revealer > box { outline-color: rgba(255, 255, 255, 0.3); border-color: #005af3; background-image: image(#005cf8); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .selection-mode .titlebar:not(headerbar) button:backdrop.flat, .selection-mode .titlebar:not(headerbar) button:backdrop, .selection-mode.titlebar:not(headerbar) button:backdrop.flat, .selection-mode.titlebar:not(headerbar) button:backdrop, @@ -1918,7 +1896,7 @@ searchbar > revealer > box { outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; background-image: image(#0f1014); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; border-color: #00348d; } @@ -2225,8 +2203,9 @@ menubar, .menubar > menuitem { min-height: 16px; padding: 4px 8px; } - .csd menubar > menuitem menu, menubar > menuitem menu, - .csd .menubar > menuitem menu, .menubar > menuitem menu { + menubar > menuitem menu:dir(rtl), menubar > menuitem menu:dir(ltr), + .menubar > menuitem menu:dir(rtl), + .menubar > menuitem menu:dir(ltr) { border-radius: 0; padding: 0; } menubar > menuitem:hover, @@ -2722,30 +2701,27 @@ switch { margin: -1px; min-width: 24px; min-height: 24px; + border: 1px solid; + border-radius: 50%; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + -gtk-outline-radius: 20px; color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); - border-color: black; - text-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); - background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - border: 1px solid black; - border-radius: 100%; - transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); - transition-property: background, border, box-shadow; - -gtk-outline-radius: 20px; } + border-color: #040405; + text-shadow: 0 -1px rgba(0, 0, 0, 0.825254902); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.825254902); + background-image: linear-gradient(to bottom, #292c37 20%, #23252e 90%); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } switch image { color: transparent; } switch:hover slider { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); - border-color: #0d0e11; - background-image: image(#0f1014); - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(0, 0, 0, 0.1); + border-color: #040405; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - border-color: #2777ff; } + background-image: linear-gradient(to bottom, #303340 20%, #272a34 90%); } switch:checked slider { - border-color: black; } + border: 1px solid #00348d; } switch:disabled slider { border-color: #0d0e11; background-image: image(#252730); @@ -2760,12 +2736,11 @@ switch { background-image: image(#23252e); text-shadow: none; -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #111317; } + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } switch:backdrop slider label, switch:backdrop slider { color: #898a8d; } switch:backdrop:checked slider { - border-color: #111317; } + border-color: #00348d; } switch:backdrop:disabled slider { border-color: #111317; background-image: image(#252730); @@ -2911,14 +2886,7 @@ check, radio { min-height: 14px; min-width: 14px; border: 1px solid; - -gtk-icon-source: none; - color: #eeeeec; - outline-color: rgba(238, 238, 236, 0.3); - border-color: black; - text-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); - background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } + -gtk-icon-source: none; } check:only-child, radio:only-child { margin: 0; } @@ -2930,59 +2898,68 @@ check, radio { popover radio.right:dir(ltr) { margin-left: 12px; margin-right: 0; } - check:hover, radio:hover { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #0047c0; - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to bottom, #2777ff 20%, #136aff 90%); } - check:hover:not(:checked), radio:hover:not(:checked) { - color: #eeeeec; - outline-color: rgba(238, 238, 236, 0.3); + check, radio { + background-clip: padding-box; + background-image: linear-gradient(to bottom, #2e313d 20%, #23252e 90%); border-color: black; - box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to bottom, #23252e 20%, #1a1c23 90%); } + box-shadow: 0 1px rgba(0, 0, 0, 0.05); + color: #eeeeec; } + check:hover, radio:hover { + background-image: linear-gradient(to bottom, #363a48 10%, #2b2f3a 90%); } check:active, radio:active { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #005af3; - background-image: image(#005cf8); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); - text-shadow: none; - -gtk-icon-shadow: none; } - check:checked, radio:checked { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #0047c0; - text-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); - background-image: linear-gradient(to bottom, #186eff 20%, #0864ff 90%); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } + box-shadow: inset 0 1px 1px 0px black; } check:disabled, radio:disabled { - border-color: #0d0e11; - background-image: image(#252730); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - check:disabled label, check:disabled, radio:disabled label, radio:disabled { - color: #898a8d; } + box-shadow: none; + color: rgba(238, 238, 236, 0.7); } check:backdrop, radio:backdrop { - border-color: #111317; background-image: image(#23252e); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); + box-shadow: none; + color: #eeeeec; } + check:backdrop:disabled, radio:backdrop:disabled { + box-shadow: none; + color: rgba(238, 238, 236, 0.7); } + check:checked, radio:checked { + background-clip: border-box; + background-image: linear-gradient(to bottom, #4187ff 20%, #2777ff 90%); + border-color: #2777ff; + box-shadow: 0 1px rgba(0, 0, 0, 0.05); + color: #ffffff; } + check:checked:hover, radio:checked:hover { + background-image: linear-gradient(to bottom, #5594ff 10%, #3b84ff 90%); } + check:checked:active, radio:checked:active { + box-shadow: inset 0 1px 1px 0px black; } + check:checked:disabled, radio:checked:disabled { + box-shadow: none; + color: rgba(255, 255, 255, 0.7); } + check:checked:backdrop, radio:checked:backdrop { + background-image: image(#2777ff); + box-shadow: none; + color: #ffffff; } + check:checked:backdrop:disabled, radio:checked:backdrop:disabled { + box-shadow: none; + color: rgba(255, 255, 255, 0.7); } + check:indeterminate, radio:indeterminate { + background-clip: border-box; + background-image: linear-gradient(to bottom, #4187ff 20%, #2777ff 90%); + border-color: #2777ff; + box-shadow: 0 1px rgba(0, 0, 0, 0.05); + color: #ffffff; } + check:indeterminate:hover, radio:indeterminate:hover { + background-image: linear-gradient(to bottom, #5594ff 10%, #3b84ff 90%); } + check:indeterminate:active, radio:indeterminate:active { + box-shadow: inset 0 1px 1px 0px black; } + check:indeterminate:disabled, radio:indeterminate:disabled { + box-shadow: none; + color: rgba(255, 255, 255, 0.7); } + check:indeterminate:backdrop, radio:indeterminate:backdrop { + background-image: image(#2777ff); + box-shadow: none; + color: #ffffff; } + check:indeterminate:backdrop:disabled, radio:indeterminate:backdrop:disabled { + box-shadow: none; + color: rgba(255, 255, 255, 0.7); } + check:backdrop, radio:backdrop { transition: 200ms ease-out; } - check:backdrop label, check:backdrop, radio:backdrop label, radio:backdrop { - color: #898a8d; } - check:backdrop:disabled, radio:backdrop:disabled { - border-color: #111317; - background-image: image(#252730); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - check:backdrop:disabled label, check:backdrop:disabled, radio:backdrop:disabled label, radio:backdrop:disabled { - color: #43495a; } .osd check, .osd radio { color: #eeeeec; border-color: #3d4251; @@ -3033,7 +3010,7 @@ check, radio { -gtk-icon-shadow: none; } menu menuitem check, menu menuitem radio { margin: 0; } - menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem radio, menu menuitem radio:hover, menu menuitem radio:disabled { + menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem check:checked, menu menuitem check:checked:hover, menu menuitem check:checked:disabled, menu menuitem check:indeterminate, menu menuitem check:indeterminate:hover, menu menuitem check:indeterminate:disabled, menu menuitem radio, menu menuitem radio:hover, menu menuitem radio:disabled, menu menuitem radio:checked, menu menuitem radio:checked:hover, menu menuitem radio:checked:disabled, menu menuitem radio:indeterminate, menu menuitem radio:indeterminate:hover, menu menuitem radio:indeterminate:disabled { min-height: 14px; min-width: 14px; background-image: none; @@ -3084,16 +3061,6 @@ treeview.view check:selected:focus, treeview.view check:selected, treeview.view radio:selected:focus, treeview.view radio:selected { color: #ffffff; } -treeview.view check:selected:disabled, -treeview.view radio:selected:disabled { - color: #898a8d; } - treeview.view check:selected:disabled:backdrop, - treeview.view radio:selected:disabled:backdrop { - color: #43495a; } -treeview.view check:backdrop:selected, treeview.view check:backdrop, -treeview.view radio:backdrop:selected, -treeview.view radio:backdrop { - color: #898a8d; } /************ * GtkScale * @@ -3195,13 +3162,7 @@ scale { box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to bottom, #23252e 20%, #1a1c23 90%); } scale slider:active { - color: #eeeeec; - outline-color: rgba(238, 238, 236, 0.3); - border-color: #0d0e11; - background-image: image(#0f1014); - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - border-color: #2777ff; } + border-color: #00348d; } scale slider:disabled { border-color: #0d0e11; background-image: image(#252730); @@ -3999,14 +3960,14 @@ row { *********************/ .app-notification, .app-notification.frame { - padding: 5px; - margin: 20px; - border-radius: 5px; + padding: 10px; + border-radius: 0 0 5px 5px; background-color: #111217; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); + background-clip: padding-box; } .app-notification:backdrop, .app-notification.frame:backdrop { - box-shadow: none; + background-image: none; transition: 200ms ease-out; } .app-notification border, .app-notification.frame border { @@ -4070,8 +4031,6 @@ messagedialog .titlebar { border-style: none; border-top-left-radius: 7px; border-top-right-radius: 7px; } - messagedialog .titlebar:backdrop { - background-image: none; } messagedialog.csd.background { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } @@ -4262,186 +4221,71 @@ infobar { border-style: none; } infobar.info, infobar.question, infobar.warning, infobar.error { text-shadow: none; } - infobar.info:backdrop > revealer > box label, infobar.info:backdrop > revealer > box, infobar.info > revealer > box label, infobar.info > revealer > box, infobar.question:backdrop > revealer > box label, infobar.question:backdrop > revealer > box, infobar.question > revealer > box label, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box label, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box label, infobar.warning > revealer > box, infobar.error:backdrop > revealer > box label, infobar.error:backdrop > revealer > box, infobar.error > revealer > box label, infobar.error > revealer > box { - color: #ffffff; } + infobar.info:backdrop > revealer > box, infobar.info > revealer > box, infobar.question:backdrop > revealer > box, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box, infobar.error:backdrop > revealer > box, infobar.error > revealer > box { + background-color: #080604; + border-bottom: 1px solid #181a20; } + infobar.info:backdrop > revealer > box label, infobar.info:backdrop > revealer > box, infobar.info > revealer > box label, infobar.info > revealer > box, infobar.question:backdrop > revealer > box label, infobar.question:backdrop > revealer > box, infobar.question > revealer > box label, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box label, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box label, infobar.warning > revealer > box, infobar.error:backdrop > revealer > box label, infobar.error:backdrop > revealer > box, infobar.error > revealer > box label, infobar.error > revealer > box { + color: #eeeeec; } infobar.info:backdrop, infobar.question:backdrop, infobar.warning:backdrop, infobar.error:backdrop { text-shadow: none; } - infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { - background-color: #0d0e11; } - infobar.info *:link, infobar.info button:link, - infobar.info button:visited, infobar.question *:link, infobar.question button:link, - infobar.question button:visited, infobar.warning *:link, infobar.warning button:link, - infobar.warning button:visited, infobar.error *:link, infobar.error button:link, - infobar.error button:visited { - color: #8db7ff; } - infobar.info:backdrop > revealer > box, infobar.info > revealer > box { - background-color: #2777ff; } - infobar.info button { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #005af3; - border-bottom-color: #0047c0; - background-image: linear-gradient(to top, #2274ff 2px, #2777ff); - text-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); } - infobar.info button:hover { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #005af3; - border-bottom-color: #0047c0; - text-shadow: 0 -1px rgba(0, 0, 0, 0.4908235294); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4908235294); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to top, #2274ff, #2c7aff 1px); } - infobar.info button:active, infobar.info button:checked { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #005af3; - background-image: image(#005cf8); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); - text-shadow: none; - -gtk-icon-shadow: none; } - infobar.info button:disabled { - border-color: #005af3; - background-image: image(#276be1); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - infobar.info button:disabled label, infobar.info button:disabled { - color: #93b5f0; } - infobar.info button:backdrop { - border-color: #005af3; - background-image: image(#2777ff); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #005af3; } - infobar.info button:backdrop label, infobar.info button:backdrop { - color: #d4e4ff; } - infobar.info button:backdrop:disabled { - border-color: #005af3; - background-image: image(#276be1); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #005af3; } - infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled { - color: #739fec; } - infobar.info button:backdrop label, infobar.info button:backdrop, infobar.info button label, infobar.info button { - color: #ffffff; } - infobar.question:backdrop > revealer > box, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box { - background-color: #fd7d00; } - infobar.question button, infobar.warning button { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #ca6400; - border-bottom-color: #974b00; - background-image: linear-gradient(to top, #f87a00 2px, #fd7d00); - text-shadow: 0 -1px rgba(0, 0, 0, 0.6031372549); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6031372549); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } - infobar.question button:hover, infobar.warning button:hover { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #ca6400; - border-bottom-color: #974b00; - text-shadow: 0 -1px rgba(0, 0, 0, 0.5551372549); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5551372549); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to top, #f87a00, #ff8003 1px); } - infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #ca6400; - background-image: image(#cf6600); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); - text-shadow: none; - -gtk-icon-shadow: none; } - infobar.question button:disabled, infobar.warning button:disabled { - border-color: #ca6400; - background-image: image(#dd7108); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - infobar.question button:disabled label, infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled { - color: #eeb884; } - infobar.question button:backdrop, infobar.warning button:backdrop { - border-color: #ca6400; - background-image: image(#fd7d00); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #ca6400; } - infobar.question button:backdrop label, infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop { - color: #ffe5cc; } - infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled { - border-color: #ca6400; - background-image: image(#dd7108); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #ca6400; } - infobar.question button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled label, infobar.warning button:backdrop:disabled { - color: #e9a35e; } - infobar.question button:backdrop label, infobar.question button:backdrop, infobar.question button label, infobar.question button, infobar.warning button:backdrop label, infobar.warning button:backdrop, infobar.warning button label, infobar.warning button { - color: #ffffff; } - infobar.error:backdrop > revealer > box, infobar.error > revealer > box { - background-color: #bf1717; } - infobar.error:backdrop > revealer > box button, infobar.error > revealer > box button { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #911212; - border-bottom-color: #640c0c; - background-image: linear-gradient(to top, #ba1616 2px, #bf1717); - text-shadow: 0 -1px rgba(0, 0, 0, 0.6643137255); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6643137255); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } - infobar.error:backdrop > revealer > box button:hover, infobar.error > revealer > box button:hover { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #911212; - border-bottom-color: #640c0c; - text-shadow: 0 -1px rgba(0, 0, 0, 0.6163137255); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6163137255); + infobar.info button, infobar.question button, infobar.warning button, infobar.error button { + 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.873254902); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); } + infobar.info button:hover, infobar.question button:hover, infobar.warning button:hover, infobar.error button: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.825254902); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.825254902); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to top, #ba1616, #c41818 1px); } - infobar.error:backdrop > revealer > box button:active, infobar.error:backdrop > revealer > box button:checked, infobar.error > revealer > box button:active, infobar.error > revealer > box button:checked { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #911212; - background-image: image(#961212); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #20232b, #252831 1px); } + infobar.info button:active, infobar.info button:checked, infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked, infobar.error button:active, infobar.error button:checked { + color: #eeeeec; + outline-color: rgba(238, 238, 236, 0.3); + border-color: #0d0e11; + background-image: image(#0f1014); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } - infobar.error:backdrop > revealer > box button:disabled, infobar.error > revealer > box button:disabled { - border-color: #911212; - background-image: image(#a81a1b); + infobar.info button:disabled, infobar.question button:disabled, infobar.warning button:disabled, infobar.error button:disabled { + border-color: #0d0e11; + background-image: image(#252730); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - infobar.error:backdrop > revealer > box button:disabled label, infobar.error:backdrop > revealer > box button:disabled, infobar.error > revealer > box button:disabled label, infobar.error > revealer > box button:disabled { - color: #d48d8d; } - infobar.error:backdrop > revealer > box button:backdrop, infobar.error > revealer > box button:backdrop { - border-color: #911212; - background-image: image(#bf1717); + infobar.info button:disabled label, infobar.info button:disabled, infobar.question button:disabled label, infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled, infobar.error button:disabled label, infobar.error button:disabled { + color: #898a8d; } + infobar.info button:backdrop, infobar.question button:backdrop, infobar.warning button:backdrop, infobar.error button:backdrop { + border-color: #111317; + background-image: image(#23252e); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #911212; } - infobar.error:backdrop > revealer > box button:backdrop label, infobar.error:backdrop > revealer > box button:backdrop, infobar.error > revealer > box button:backdrop label, infobar.error > revealer > box button:backdrop { - color: #f2d1d1; } - infobar.error:backdrop > revealer > box button:backdrop:disabled, infobar.error > revealer > box button:backdrop:disabled { - border-color: #911212; - background-image: image(#a81a1b); + border-color: #0d0e11; } + infobar.info button:backdrop label, infobar.info button:backdrop, infobar.question button:backdrop label, infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop, infobar.error button:backdrop label, infobar.error button:backdrop { + color: #898a8d; } + infobar.info button:backdrop:disabled, infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled, infobar.error button:backdrop:disabled { + border-color: #111317; + background-image: image(#252730); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #911212; } - infobar.error:backdrop > revealer > box button:backdrop:disabled label, infobar.error:backdrop > revealer > box button:backdrop:disabled, infobar.error > revealer > box button:backdrop:disabled label, infobar.error > revealer > box button:backdrop:disabled { - color: #c66a6b; } - infobar.error:backdrop > revealer > box button:backdrop label, infobar.error:backdrop > revealer > box button:backdrop, infobar.error:backdrop > revealer > box button label, infobar.error:backdrop > revealer > box button, infobar.error > revealer > box button:backdrop label, infobar.error > revealer > box button:backdrop, infobar.error > revealer > box button label, infobar.error > revealer > box button { - color: #ffffff; } + border-color: #0d0e11; } + infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled, infobar.question button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled label, infobar.warning button:backdrop:disabled, infobar.error button:backdrop:disabled label, infobar.error button:backdrop:disabled { + color: #43495a; } + infobar.info button:backdrop label, infobar.info button:backdrop, infobar.info button label, infobar.info button, infobar.question button:backdrop label, infobar.question button:backdrop, infobar.question button label, infobar.question button, infobar.warning button:backdrop label, infobar.warning button:backdrop, infobar.warning button label, infobar.warning button, infobar.error button:backdrop label, infobar.error button:backdrop, infobar.error button label, infobar.error button { + color: #eeeeec; } + infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { + background-color: #0d0e11; } + infobar.info *:link, infobar.question *:link, infobar.warning *:link, infobar.error *:link { + color: #8db7ff; } /************ * Tooltips * @@ -4591,26 +4435,26 @@ colorchooser .popover.osd { decoration { border-radius: 8px 8px 0 0; border-width: 0px; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); + box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(13, 14, 17, 0.9); margin: 10px; } decoration:backdrop { - box-shadow: 0 2px 8px 0 transparent, 0 0 0 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(13, 14, 17, 0.9); transition: 200ms ease-out; } .maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; } .popup decoration { box-shadow: none; } .ssd decoration { - box-shadow: none; } + box-shadow: 0 0 0 1px rgba(13, 14, 17, 0.9); } .csd.popup decoration { border-radius: 5px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(13, 14, 17, 0.8); } tooltip.csd decoration { border-radius: 5px; box-shadow: none; } messagedialog.csd decoration { border-radius: 8px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(13, 14, 17, 0.8); } .solid-csd decoration { margin: 0; padding: 4px; @@ -4669,31 +4513,31 @@ entry selection, modelbutton.flat:selected, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { color: #ffffff; } - row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, + label:disabled selection, row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, iconview text:disabled:selected:focus, textview text:disabled:selected:focus, .view text:disabled:selected, iconview text:disabled:selected, textview text:disabled:selected, iconview text selection:disabled:focus, .view text selection:disabled, iconview text selection:disabled, - textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, + textview text selection:disabled, flowbox flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected { color: #93bbff; } - row:selected label:backdrop, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, + label:backdrop selection, row:selected label:backdrop, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, iconview text:backdrop:selected:focus, textview text:backdrop:selected:focus, .view text:backdrop:selected, iconview text:backdrop:selected, textview text:backdrop:selected, iconview text selection:backdrop:focus, .view text selection:backdrop, iconview text selection:backdrop, - textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label:backdrop selection, spinbutton:not(.vertical) selection:backdrop, + textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected { color: #d4d5d7; } - row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, + label:backdrop selection:disabled, row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected, textview text:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, - textview text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, label:disabled selection:backdrop, label:backdrop selection:disabled, spinbutton:not(.vertical) selection:backdrop:disabled, + textview text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, entry selection:backdrop:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, row:backdrop:disabled:selected, calendar:backdrop:disabled:selected { color: #5b93f3; } @@ -4788,6 +4632,8 @@ stackswitcher button.text-button.circular { popover.emoji-picker { padding-left: 0; padding-right: 0; } + popover.emoji-picker entry.search { + margin: 3px 5px 5px 5px; } button.emoji-section { border-color: transparent; @@ -4803,10 +4649,14 @@ button.emoji-section { box-shadow: none; text-shadow: none; outline-offset: -5px; } + button.emoji-section:first-child { + margin-left: 7px; } + button.emoji-section:last-child { + margin-right: 7px; } button.emoji-section:backdrop:not(:checked) { border-color: transparent; } button.emoji-section:hover { - border-color: #0d0e11; } + border-color: rgba(238, 238, 236, 0.1); } button.emoji-section:checked { border-color: #2777ff; } button.emoji-section label { @@ -4819,10 +4669,10 @@ button.emoji-section { popover.emoji-picker .emoji { font-size: x-large; - padding: 6px; - border-radius: 6px; } + padding: 6px; } popover.emoji-picker .emoji :hover { - background: #2777ff; } + background: #2777ff; + border-radius: 6px; } popover.emoji-completion arrow { border: none; @@ -4834,6 +4684,290 @@ popover.emoji-completion contents row box { popover.emoji-completion .emoji:hover { background: #2e313d; } +* { + outline-color: alpha(currentColor,0.07); + outline-style: solid; + outline-offset: -2px; + outline-width: 2px; + -gtk-outline-radius: 6px; } + +.titlebar stackswitcher button:checked:active, .titlebar stackswitcher button:checked, +.titlebar button.toggle:active, +.titlebar button.toggle:checked, +headerbar stackswitcher button:checked:active, +headerbar stackswitcher button:checked, +headerbar button.toggle:active, +headerbar button.toggle:checked, +button:active, +button:checked { + background: image(#040405); + box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); } + +switch:hover slider, scale slider:active { + background-image: image(#0f1014); } + +/********** + * Switch * + **********/ +switch slider { + color: #eeeeec; + outline-color: rgba(238, 238, 236, 0.3); + border-color: black; + text-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); + background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + border: 1px solid black; + border-radius: 50%; + transition-property: background, border, box-shadow; } +switch:hover slider { + border-color: #2777ff; } +switch:checked slider { + border-color: black; } +switch:backdrop slider { + border-color: #111317; } +switch:backdrop:checked slider { + border-color: #111317; } + +/************ + * GtkScale * + ************/ +scale slider:active { + border-color: #2777ff; } + +/*************** + * Header bars * + ***************/ +.titlebar, +headerbar { + border-color: #2777ff; + 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); + background-repeat: no-repeat; + background-position: left; } + .titlebar:backdrop, + headerbar:backdrop { + background-image: -gtk-scaled(url("assets/kali-headerbar-logo-dark.png"), url("assets/kali-headerbar-logo-dark@2.png")); + background-repeat: no-repeat; + background-position: left; } + +/************** + * GtkInfoBar * + **************/ +infobar, infobar.info, infobar.question, infobar.warning, infobar.error { + border-style: none; + text-shadow: none; } + infobar:backdrop > revealer > box label, infobar:backdrop > revealer > box, infobar > revealer > box label, infobar > revealer > box, infobar.info:backdrop > revealer > box label, infobar.info:backdrop > revealer > box, infobar.info > revealer > box label, infobar.info > revealer > box, infobar.question:backdrop > revealer > box label, infobar.question:backdrop > revealer > box, infobar.question > revealer > box label, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box label, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box label, infobar.warning > revealer > box, infobar.error:backdrop > revealer > box label, infobar.error:backdrop > revealer > box, infobar.error > revealer > box label, infobar.error > revealer > box { + color: #ffffff; } + infobar:backdrop, infobar.info:backdrop, infobar.question:backdrop, infobar.warning:backdrop, infobar.error:backdrop { + text-shadow: none; } + infobar selection, infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { + background-color: #0d0e11; } + infobar *:link, infobar.info *:link, infobar.question *:link, infobar.warning *:link, infobar.error *:link { + color: #8db7ff; } +infobar.info:backdrop > revealer > box, infobar.info > revealer > box { + background-color: #2777ff; } +infobar.info button { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #005af3; + border-bottom-color: #0047c0; + background-image: linear-gradient(to top, #2274ff 2px, #2777ff); + text-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); } + infobar.info button:hover { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #005af3; + border-bottom-color: #0047c0; + text-shadow: 0 -1px rgba(0, 0, 0, 0.4908235294); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4908235294); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #2274ff, #2c7aff 1px); } + infobar.info button:active, infobar.info button:checked { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #005af3; + background-image: image(#005cf8); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + infobar.info button:disabled { + border-color: #005af3; + background-image: image(#276be1); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + infobar.info button:disabled label, infobar.info button:disabled { + color: #93b5f0; } + infobar.info button:backdrop { + border-color: #005af3; + background-image: image(#2777ff); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #005af3; } + infobar.info button:backdrop label, infobar.info button:backdrop { + color: #d4e4ff; } + infobar.info button:backdrop:disabled { + border-color: #005af3; + background-image: image(#276be1); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #005af3; } + infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled { + color: #739fec; } + infobar.info button:backdrop label, infobar.info button:backdrop, infobar.info button label, infobar.info button { + color: #ffffff; } +infobar.question:backdrop > revealer > box, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box { + background-color: #fd7d00; } +infobar.question button, infobar.warning button { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #ca6400; + border-bottom-color: #974b00; + background-image: linear-gradient(to top, #f87a00 2px, #fd7d00); + text-shadow: 0 -1px rgba(0, 0, 0, 0.6031372549); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6031372549); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } + infobar.question button:hover, infobar.warning button:hover { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #ca6400; + border-bottom-color: #974b00; + text-shadow: 0 -1px rgba(0, 0, 0, 0.5551372549); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5551372549); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #f87a00, #ff8003 1px); } + infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #ca6400; + background-image: image(#cf6600); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + infobar.question button:disabled, infobar.warning button:disabled { + border-color: #ca6400; + background-image: image(#dd7108); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + infobar.question button:disabled label, infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled { + color: #eeb884; } + infobar.question button:backdrop, infobar.warning button:backdrop { + border-color: #ca6400; + background-image: image(#fd7d00); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #ca6400; } + infobar.question button:backdrop label, infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop { + color: #ffe5cc; } + infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled { + border-color: #ca6400; + background-image: image(#dd7108); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #ca6400; } + infobar.question button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled label, infobar.warning button:backdrop:disabled { + color: #e9a35e; } + infobar.question button:backdrop label, infobar.question button:backdrop, infobar.question button label, infobar.question button, infobar.warning button:backdrop label, infobar.warning button:backdrop, infobar.warning button label, infobar.warning button { + color: #ffffff; } +infobar.error:backdrop > revealer > box, infobar.error > revealer > box { + background-color: #bf1717; } + infobar.error:backdrop > revealer > box button, infobar.error > revealer > box button { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #911212; + border-bottom-color: #640c0c; + background-image: linear-gradient(to top, #ba1616 2px, #bf1717); + text-shadow: 0 -1px rgba(0, 0, 0, 0.6643137255); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6643137255); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } + infobar.error:backdrop > revealer > box button:hover, infobar.error > revealer > box button:hover { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #911212; + border-bottom-color: #640c0c; + text-shadow: 0 -1px rgba(0, 0, 0, 0.6163137255); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6163137255); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #ba1616, #c41818 1px); } + infobar.error:backdrop > revealer > box button:active, infobar.error:backdrop > revealer > box button:checked, infobar.error > revealer > box button:active, infobar.error > revealer > box button:checked { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #911212; + background-image: image(#961212); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + infobar.error:backdrop > revealer > box button:disabled, infobar.error > revealer > box button:disabled { + border-color: #911212; + background-image: image(#a81a1b); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + infobar.error:backdrop > revealer > box button:disabled label, infobar.error:backdrop > revealer > box button:disabled, infobar.error > revealer > box button:disabled label, infobar.error > revealer > box button:disabled { + color: #d48d8d; } + infobar.error:backdrop > revealer > box button:backdrop, infobar.error > revealer > box button:backdrop { + border-color: #911212; + background-image: image(#bf1717); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #911212; } + infobar.error:backdrop > revealer > box button:backdrop label, infobar.error:backdrop > revealer > box button:backdrop, infobar.error > revealer > box button:backdrop label, infobar.error > revealer > box button:backdrop { + color: #f2d1d1; } + infobar.error:backdrop > revealer > box button:backdrop:disabled, infobar.error > revealer > box button:backdrop:disabled { + border-color: #911212; + background-image: image(#a81a1b); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #911212; } + infobar.error:backdrop > revealer > box button:backdrop:disabled label, infobar.error:backdrop > revealer > box button:backdrop:disabled, infobar.error > revealer > box button:backdrop:disabled label, infobar.error > revealer > box button:backdrop:disabled { + color: #c66a6b; } + infobar.error:backdrop > revealer > box button:backdrop label, infobar.error:backdrop > revealer > box button:backdrop, infobar.error:backdrop > revealer > box button label, infobar.error:backdrop > revealer > box button, infobar.error > revealer > box button:backdrop label, infobar.error > revealer > box button:backdrop, infobar.error > revealer > box button label, infobar.error > revealer > box button { + color: #ffffff; } + +/********************* + * App Notifications * + *********************/ +.app-notification, +.app-notification.frame { + padding: 5px; + margin: 20px; + border-radius: 5px; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); + background-image: none; } + .app-notification:backdrop, + .app-notification.frame:backdrop { + box-shadow: none; } + +/*********** + * Dialogs * + ***********/ +messagedialog .titlebar:backdrop { + background-image: none; } + +/********************** + * Window Decorations * + *********************/ +decoration { + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } + decoration:backdrop { + box-shadow: 0 2px 8px 0 transparent, 0 0 0 3px rgba(0, 0, 0, 0.25); } + .ssd decoration { + box-shadow: none; } + .csd.popup decoration { + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } + messagedialog.csd decoration { + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } + /* Nautilus */ @define-color disk_space_unknown #383c4a; @define-color disk_space_used #2777ff; 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 10bbdd55..d1b3e41c 100644 --- a/share/themes/Kali-Light/gtk-3.0/gtk-dark.css +++ b/share/themes/Kali-Light/gtk-3.0/gtk-dark.css @@ -1,3 +1,6 @@ +/*************************** + * Check and Radio buttons * + ***************************/ @import url("applications/nautilus/Adwaita.css"); * { padding: 0; @@ -9,11 +12,11 @@ -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; - outline-color: alpha(currentColor,0.07); - outline-style: solid; - outline-offset: -2px; - outline-width: 2px; - -gtk-outline-radius: 6px; + outline-color: alpha(currentColor,0.3); + outline-style: dashed; + outline-offset: -3px; + outline-width: 1px; + -gtk-outline-radius: 3px; -gtk-secondary-caret-color: #2777ff; } /*************** @@ -475,7 +478,7 @@ button { text-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); } - notebook > header > tabs > arrow, button.sidebar-button, button.titlebutton, + notebook > header > tabs > arrow, button.sidebar-button, button.titlebutton, notebook > header > tabs > arrow.flat, button.flat.titlebutton, button.flat { border-color: transparent; background-color: transparent; @@ -484,11 +487,11 @@ button { text-shadow: none; -gtk-icon-shadow: none; transition: none; } - notebook > header > tabs > arrow:hover, button.sidebar-button:hover, button.titlebutton:hover, + notebook > header > tabs > arrow:hover, button.sidebar-button:hover, button.titlebutton:hover, notebook > header > tabs > arrow.flat:hover, button.flat.titlebutton:hover, button.flat:hover { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; } - notebook > header > tabs > arrow:hover:active, button.sidebar-button:hover:active, button.titlebutton:hover:active, + notebook > header > tabs > arrow:hover:active, button.sidebar-button:hover:active, button.titlebutton:hover:active, notebook > header > tabs > arrow.flat:hover:active, button.flat.titlebutton:hover:active, button.flat:hover:active { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook > header > tabs > arrow:hover, button.titlebutton:hover, @@ -509,11 +512,11 @@ button { outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; background-image: image(#0f1014); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; transition-duration: 50ms; } - notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, button.titlebutton:backdrop, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, + notebook > header > tabs > arrow:backdrop.flat, button.titlebutton:backdrop.flat, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, button:backdrop.flat, button:backdrop { border-color: #111317; @@ -523,13 +526,13 @@ button { box-shadow: inset 0 1px rgba(255, 255, 255, 0); transition: 200ms ease-out; -gtk-icon-effect: none; } - notebook > header > tabs > arrow:backdrop label, button.sidebar-button:backdrop label, button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, button.titlebutton:backdrop, notebook > header > tabs > arrow:backdrop label, button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, + notebook > header > tabs > arrow:backdrop.flat label, button.titlebutton:backdrop.flat label, notebook > header > tabs > arrow:backdrop.flat, button.titlebutton:backdrop.flat, notebook > header > tabs > arrow:backdrop label, button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, button:backdrop.flat label, button:backdrop.flat, button:backdrop label, button:backdrop { color: #898a8d; } - notebook > header > tabs > arrow:backdrop:active, button.sidebar-button:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.sidebar-button:backdrop:checked, button.titlebutton:backdrop:checked, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, + notebook > header > tabs > arrow:backdrop.flat:active, button.titlebutton:backdrop.flat:active, notebook > header > tabs > arrow:backdrop.flat:checked, button.titlebutton:backdrop.flat:checked, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, button:backdrop.flat:active, button:backdrop.flat:checked, button:backdrop:active, @@ -537,7 +540,7 @@ button { border-color: #111317; background-image: image(#1b1d23); box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - notebook > header > tabs > arrow:backdrop:active label, button.sidebar-button:backdrop:active label, button.titlebutton:backdrop:active label, notebook > header > tabs > arrow:backdrop:active, button.sidebar-button:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked label, button.sidebar-button:backdrop:checked label, button.titlebutton:backdrop:checked label, notebook > header > tabs > arrow:backdrop:checked, button.sidebar-button:backdrop:checked, button.titlebutton:backdrop:checked, notebook > header > tabs > arrow:backdrop:active label, button.titlebutton:backdrop:active label, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked label, button.titlebutton:backdrop:checked label, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, + notebook > header > tabs > arrow:backdrop.flat:active label, button.titlebutton:backdrop.flat:active label, notebook > header > tabs > arrow:backdrop.flat:active, button.titlebutton:backdrop.flat:active, notebook > header > tabs > arrow:backdrop.flat:checked label, button.titlebutton:backdrop.flat:checked label, notebook > header > tabs > arrow:backdrop.flat:checked, button.titlebutton:backdrop.flat:checked, notebook > header > tabs > arrow:backdrop:active label, button.titlebutton:backdrop:active label, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked label, button.titlebutton:backdrop:checked label, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, button:backdrop.flat:active label, button:backdrop.flat:active, button:backdrop.flat:checked label, @@ -547,7 +550,7 @@ button { button:backdrop:checked label, button:backdrop:checked { color: #898a8d; } - notebook > header > tabs > arrow:backdrop:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, + notebook > header > tabs > arrow:backdrop.flat:disabled, button.titlebutton:backdrop.flat:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, button:backdrop.flat:disabled, button:backdrop:disabled { border-color: #111317; @@ -555,13 +558,13 @@ button { text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - notebook > header > tabs > arrow:backdrop:disabled label, button.sidebar-button:backdrop:disabled label, button.titlebutton:backdrop:disabled label, notebook > header > tabs > arrow:backdrop:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled label, button.titlebutton:backdrop:disabled label, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, + notebook > header > tabs > arrow:backdrop.flat:disabled label, button.titlebutton:backdrop.flat:disabled label, notebook > header > tabs > arrow:backdrop.flat:disabled, button.titlebutton:backdrop.flat:disabled, notebook > header > tabs > arrow:backdrop:disabled label, button.titlebutton:backdrop:disabled label, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, button:backdrop.flat:disabled label, button:backdrop.flat:disabled, button:backdrop:disabled label, button:backdrop:disabled { color: #43495a; } - notebook > header > tabs > arrow:backdrop:disabled:active, button.sidebar-button:backdrop:disabled:active, button.titlebutton:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.sidebar-button:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, button.titlebutton:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:checked, + notebook > header > tabs > arrow:backdrop.flat:disabled:active, button.titlebutton:backdrop.flat:disabled:active, notebook > header > tabs > arrow:backdrop.flat:disabled:checked, button.titlebutton:backdrop.flat:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, button.titlebutton:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:checked, button:backdrop.flat:disabled:active, button:backdrop.flat:disabled:checked, button:backdrop:disabled:active, @@ -569,13 +572,13 @@ button { border-color: #111317; background-image: image(#1b1d23); box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - notebook > header > tabs > arrow:backdrop:disabled:active label, button.sidebar-button:backdrop:disabled:active label, button.titlebutton:backdrop:disabled:active label, notebook > header > tabs > arrow:backdrop:disabled:checked label, button.sidebar-button:backdrop:disabled:checked label, button.titlebutton:backdrop:disabled:checked label, notebook > header > tabs > arrow:backdrop:disabled:active label, button.titlebutton:backdrop:disabled:active label, notebook > header > tabs > arrow:backdrop:disabled:checked label, button.titlebutton:backdrop:disabled:checked label, + notebook > header > tabs > arrow:backdrop.flat:disabled:active label, button.titlebutton:backdrop.flat:disabled:active label, notebook > header > tabs > arrow:backdrop.flat:disabled:checked label, button.titlebutton:backdrop.flat:disabled:checked label, notebook > header > tabs > arrow:backdrop:disabled:active label, button.titlebutton:backdrop:disabled:active label, notebook > header > tabs > arrow:backdrop:disabled:checked label, button.titlebutton:backdrop:disabled:checked label, button:backdrop.flat:disabled:active label, button:backdrop.flat:disabled:checked label, button:backdrop:disabled:active label, button:backdrop:disabled:checked label { color: #43495a; } - notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, button.titlebutton:backdrop, notebook > header > tabs > arrow:disabled, button.sidebar-button:disabled, button.titlebutton:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, + notebook > header > tabs > arrow.flat:backdrop, button.flat.titlebutton:backdrop, notebook > header > tabs > arrow.flat:disabled, button.flat.titlebutton:disabled, notebook > header > tabs > arrow.flat:backdrop:disabled, button.flat.titlebutton:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { @@ -845,7 +848,7 @@ button.suggested-action { outline-color: rgba(255, 255, 255, 0.3); border-color: #005af3; background-image: image(#005cf8); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .selection-mode button.titlebutton:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { @@ -977,7 +980,7 @@ button.destructive-action { outline-color: rgba(255, 255, 255, 0.3); border-color: #790e0e; background-image: image(#7d0f0f); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } button.destructive-action:backdrop, button.destructive-action.flat:backdrop { @@ -1177,7 +1180,7 @@ button.circular { outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; background-image: image(#0f1014); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .inline-toolbar toolbutton > button:disabled { @@ -1229,31 +1232,27 @@ entry, .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button border-radius: 0; border-right-style: none; } -.linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > -entry:first-child, .inline-toolbar button:first-child, .linked > button:first-child, toolbar.inline-toolbar toolbutton:first-child > button.flat, -toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, filechooser .path-bar.linked > button:dir(ltr):first-child, filechooser .path-bar.linked > button:dir(rtl):last-child { +toolbar.inline-toolbar toolbutton:first-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > +entry:first-child, .inline-toolbar button:first-child, .linked > button:first-child, filechooser .path-bar.linked > button:dir(ltr):first-child, filechooser .path-bar.linked > button:dir(rtl):last-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: none; } -.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > -entry:last-child, .inline-toolbar button:last-child, .linked > button:last-child, toolbar.inline-toolbar toolbutton:last-child > button.flat, -toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, filechooser .path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > button:dir(rtl):first-child { +toolbar.inline-toolbar toolbutton:last-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > +entry:last-child, .inline-toolbar button:last-child, .linked > button:last-child, filechooser .path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > button:dir(rtl):first-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right-style: solid; } -.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > -entry:only-child, .inline-toolbar button:only-child, .linked > button:only-child, toolbar.inline-toolbar toolbutton:only-child > button.flat, -toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > combobox:only-child > box > button.combo { - border-radius: 5px; - border-style: solid; } - -filechooser .path-bar.linked > button:only-child { +toolbar.inline-toolbar toolbutton:only-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > +entry:only-child, .inline-toolbar button:only-child, .linked > button:only-child, filechooser .path-bar.linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo { border-radius: 5px; border-style: solid; } @@ -1266,11 +1265,13 @@ entry, .linked.vertical > button, .linked.vertical > button:hover, .linked.verti entry:first-child, .linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo { border-top-left-radius: 5px; border-top-right-radius: 5px; } + .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child, .linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; } + .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child, .linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo { border-radius: 5px; @@ -1335,88 +1336,69 @@ list row button.image-button:not(.flat) { outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; background-image: image(#0f1014); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } /********* * Links * *********/ -button:link > label, -button:visited > label, *:link, button:link, -button:visited { +button:link, +button:visited, button:link > label, +button:visited > label, *:link { color: #8db7ff; } - button:link > label:visited, - button:visited > label:visited, *:link:visited, - button:visited { + button:visited, button:link > label:visited, + button:visited > label:visited, *:link:visited { color: #5a97ff; } - *:selected button:link > label:visited, + *:selected button:visited, *:selected button:link > label:visited, *:selected button:visited > label:visited, - *:selected *:link:visited, - *:selected button:visited:link, - *:selected button:visited { + *:selected *:link:visited { color: #a9c9ff; } - button:link > label:hover, - button:visited > label:hover, *:link:hover, button:hover:link, - button:hover:visited { + button:hover:link, + button:hover:visited, button:link > label:hover, + button:visited > label:hover, *:link:hover { color: #c0d7ff; } - *:selected button:link > label:hover, - *:selected button:visited > label:hover, - *:selected *:link:hover, *:selected button:hover:link, - *:selected button:hover:visited { + *:selected button:hover:visited, *:selected button:link > label:hover, + *:selected button:visited > label:hover, + *:selected *:link:hover { color: #e9f1ff; } - button:link > label:active, - button:visited > label:active, *:link:active, button:active:link, - button:active:visited { + button:active:link, + button:active:visited, button:link > label:active, + button:visited > label:active, *:link:active { color: #8db7ff; } - *:selected button:link > label:active, - *:selected button:visited > label:active, - *:selected *:link:active, *:selected button:active:link, - *:selected button:active:visited { + *:selected button:active:visited, *:selected button:link > label:active, + *:selected button:visited > label:active, + *:selected *:link:active { color: #d4e4ff; } - button:link > label:disabled, - button:visited > label:disabled, button:link > label:disabled:backdrop, + button:disabled:link, + button:disabled:visited, button:link > label:disabled, + button:visited > label:disabled, button:disabled:backdrop:link, + button:disabled:backdrop:visited, button:link > label:disabled:backdrop, button:visited > label:disabled:backdrop, *:link:disabled, - button:disabled:link, - button:disabled:visited, - *:link:disabled:backdrop, - button:disabled:backdrop:link, - button:disabled:backdrop:visited { + *:link:disabled:backdrop { color: rgba(198, 198, 198, 0.8); } - button:link > label:backdrop:backdrop:hover, - button:visited > label:backdrop:backdrop:hover, button:link > label:backdrop:backdrop:hover:selected, - button:visited > label:backdrop:backdrop:hover:selected, button:link > label:backdrop, + button:backdrop:backdrop:hover:link, + button:backdrop:backdrop:hover:visited, button:link > label:backdrop:backdrop:hover, + button:visited > label:backdrop:backdrop:hover, button:backdrop:backdrop:hover:selected:link, + button:backdrop:backdrop:hover:selected:visited, button:link > label:backdrop:backdrop:hover:selected, + button:visited > label:backdrop:backdrop:hover:selected, button:backdrop:link, + button:backdrop:visited, button:link > label:backdrop, button:visited > label:backdrop, *:link:backdrop:backdrop:hover, - button:backdrop:backdrop:hover:link, - button:backdrop:backdrop:hover:visited, *:link:backdrop:backdrop:hover:selected, - button:backdrop:backdrop:hover:selected:link, - button:backdrop:backdrop:hover:selected:visited, - .selection-mode .titlebar:not(headerbar) .subtitle:backdrop:backdrop:hover:link, - .selection-mode.titlebar:not(headerbar) .subtitle:backdrop:backdrop:hover:link, - .selection-mode headerbar .subtitle:backdrop:backdrop:hover:link, - headerbar.selection-mode .subtitle:backdrop:backdrop:hover:link, - *:link:backdrop, - button:backdrop:link, - button:backdrop:visited { + *:link:backdrop { color: #2777ff; } - button:link > label:selected, - button:visited > label:selected, *:selected button:link > label, + .selection-mode .titlebar:not(headerbar) .subtitle:link, .selection-mode.titlebar:not(headerbar) .subtitle:link, + .selection-mode headerbar .subtitle:link, headerbar.selection-mode .subtitle:link, button:selected:link, + button:selected:visited, button:link > label:selected, + button:visited > label:selected, *:selected button:link, + *:selected button:visited, *:selected button:link > label, *:selected button:visited > label, *:link:selected, - button:selected:link, - button:selected:visited, - .selection-mode .titlebar:not(headerbar) .subtitle:link, - .selection-mode.titlebar:not(headerbar) .subtitle:link, - .selection-mode headerbar .subtitle:link, - headerbar.selection-mode .subtitle:link, - *:selected *:link, - *:selected button:link, - *:selected button:visited { + *:selected *:link { color: #d4e4ff; } button:link, @@ -1687,21 +1669,17 @@ searchbar > revealer > box { min-height: 40px; border-width: 0 0 1px; border-style: solid; - border-color: #2777ff; + border-color: black; border-radius: 0; - 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); + background: #0d0e11 linear-gradient(to top, #16171d, #1a1c23); box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); - background-repeat: no-repeat; - background-position: left; /* Darken switchbuttons for headerbars. issue #1588 */ /* hide the close button separator */ } .titlebar:backdrop:not(headerbar), headerbar:backdrop { border-color: #111317; background-color: #23252e; - background-image: -gtk-scaled(url("assets/kali-headerbar-logo-dark.png"), url("assets/kali-headerbar-logo-dark@2.png")); - background-repeat: no-repeat; - background-position: left; + background-image: none; box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); transition: 200ms ease-out; } .titlebar:not(headerbar) .title, @@ -1718,7 +1696,7 @@ searchbar > revealer > box { .titlebar:not(headerbar) button.toggle:checked, headerbar stackswitcher button:checked, headerbar button.toggle:checked { - background: image(#040405); + background: image(#0f1014); border-color: #060708; border-top-color: black; } .titlebar:not(headerbar) stackswitcher button:checked:backdrop, @@ -1789,7 +1767,7 @@ searchbar > revealer > box { outline-color: rgba(255, 255, 255, 0.3); border-color: #005af3; background-image: image(#005cf8); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .selection-mode .titlebar:not(headerbar) button:backdrop.flat, .selection-mode .titlebar:not(headerbar) button:backdrop, .selection-mode.titlebar:not(headerbar) button:backdrop.flat, .selection-mode.titlebar:not(headerbar) button:backdrop, @@ -1918,7 +1896,7 @@ searchbar > revealer > box { outline-color: rgba(238, 238, 236, 0.3); border-color: #0d0e11; background-image: image(#0f1014); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; border-color: #00348d; } @@ -2225,8 +2203,9 @@ menubar, .menubar > menuitem { min-height: 16px; padding: 4px 8px; } - .csd menubar > menuitem menu, menubar > menuitem menu, - .csd .menubar > menuitem menu, .menubar > menuitem menu { + menubar > menuitem menu:dir(rtl), menubar > menuitem menu:dir(ltr), + .menubar > menuitem menu:dir(rtl), + .menubar > menuitem menu:dir(ltr) { border-radius: 0; padding: 0; } menubar > menuitem:hover, @@ -2722,30 +2701,27 @@ switch { margin: -1px; min-width: 24px; min-height: 24px; + border: 1px solid; + border-radius: 50%; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + -gtk-outline-radius: 20px; color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); - border-color: black; - text-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); - background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - border: 1px solid black; - border-radius: 100%; - transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); - transition-property: background, border, box-shadow; - -gtk-outline-radius: 20px; } + border-color: #040405; + text-shadow: 0 -1px rgba(0, 0, 0, 0.825254902); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.825254902); + background-image: linear-gradient(to bottom, #292c37 20%, #23252e 90%); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } switch image { color: transparent; } switch:hover slider { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); - border-color: #0d0e11; - background-image: image(#0f1014); - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(0, 0, 0, 0.1); + border-color: #040405; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - border-color: #2777ff; } + background-image: linear-gradient(to bottom, #303340 20%, #272a34 90%); } switch:checked slider { - border-color: black; } + border: 1px solid #00348d; } switch:disabled slider { border-color: #0d0e11; background-image: image(#252730); @@ -2760,12 +2736,11 @@ switch { background-image: image(#23252e); text-shadow: none; -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #111317; } + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } switch:backdrop slider label, switch:backdrop slider { color: #898a8d; } switch:backdrop:checked slider { - border-color: #111317; } + border-color: #00348d; } switch:backdrop:disabled slider { border-color: #111317; background-image: image(#252730); @@ -2911,14 +2886,7 @@ check, radio { min-height: 14px; min-width: 14px; border: 1px solid; - -gtk-icon-source: none; - color: #eeeeec; - outline-color: rgba(238, 238, 236, 0.3); - border-color: black; - text-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); - background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } + -gtk-icon-source: none; } check:only-child, radio:only-child { margin: 0; } @@ -2930,59 +2898,68 @@ check, radio { popover radio.right:dir(ltr) { margin-left: 12px; margin-right: 0; } - check:hover, radio:hover { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #0047c0; - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to bottom, #2777ff 20%, #136aff 90%); } - check:hover:not(:checked), radio:hover:not(:checked) { - color: #eeeeec; - outline-color: rgba(238, 238, 236, 0.3); + check, radio { + background-clip: padding-box; + background-image: linear-gradient(to bottom, #2e313d 20%, #23252e 90%); border-color: black; - box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to bottom, #23252e 20%, #1a1c23 90%); } + box-shadow: 0 1px rgba(0, 0, 0, 0.05); + color: #eeeeec; } + check:hover, radio:hover { + background-image: linear-gradient(to bottom, #363a48 10%, #2b2f3a 90%); } check:active, radio:active { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #005af3; - background-image: image(#005cf8); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); - text-shadow: none; - -gtk-icon-shadow: none; } - check:checked, radio:checked { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #0047c0; - text-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); - background-image: linear-gradient(to bottom, #186eff 20%, #0864ff 90%); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } + box-shadow: inset 0 1px 1px 0px black; } check:disabled, radio:disabled { - border-color: #0d0e11; - background-image: image(#252730); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - check:disabled label, check:disabled, radio:disabled label, radio:disabled { - color: #898a8d; } + box-shadow: none; + color: rgba(238, 238, 236, 0.7); } check:backdrop, radio:backdrop { - border-color: #111317; background-image: image(#23252e); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); + box-shadow: none; + color: #eeeeec; } + check:backdrop:disabled, radio:backdrop:disabled { + box-shadow: none; + color: rgba(238, 238, 236, 0.7); } + check:checked, radio:checked { + background-clip: border-box; + background-image: linear-gradient(to bottom, #4187ff 20%, #2777ff 90%); + border-color: #2777ff; + box-shadow: 0 1px rgba(0, 0, 0, 0.05); + color: #ffffff; } + check:checked:hover, radio:checked:hover { + background-image: linear-gradient(to bottom, #5594ff 10%, #3b84ff 90%); } + check:checked:active, radio:checked:active { + box-shadow: inset 0 1px 1px 0px black; } + check:checked:disabled, radio:checked:disabled { + box-shadow: none; + color: rgba(255, 255, 255, 0.7); } + check:checked:backdrop, radio:checked:backdrop { + background-image: image(#2777ff); + box-shadow: none; + color: #ffffff; } + check:checked:backdrop:disabled, radio:checked:backdrop:disabled { + box-shadow: none; + color: rgba(255, 255, 255, 0.7); } + check:indeterminate, radio:indeterminate { + background-clip: border-box; + background-image: linear-gradient(to bottom, #4187ff 20%, #2777ff 90%); + border-color: #2777ff; + box-shadow: 0 1px rgba(0, 0, 0, 0.05); + color: #ffffff; } + check:indeterminate:hover, radio:indeterminate:hover { + background-image: linear-gradient(to bottom, #5594ff 10%, #3b84ff 90%); } + check:indeterminate:active, radio:indeterminate:active { + box-shadow: inset 0 1px 1px 0px black; } + check:indeterminate:disabled, radio:indeterminate:disabled { + box-shadow: none; + color: rgba(255, 255, 255, 0.7); } + check:indeterminate:backdrop, radio:indeterminate:backdrop { + background-image: image(#2777ff); + box-shadow: none; + color: #ffffff; } + check:indeterminate:backdrop:disabled, radio:indeterminate:backdrop:disabled { + box-shadow: none; + color: rgba(255, 255, 255, 0.7); } + check:backdrop, radio:backdrop { transition: 200ms ease-out; } - check:backdrop label, check:backdrop, radio:backdrop label, radio:backdrop { - color: #898a8d; } - check:backdrop:disabled, radio:backdrop:disabled { - border-color: #111317; - background-image: image(#252730); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - check:backdrop:disabled label, check:backdrop:disabled, radio:backdrop:disabled label, radio:backdrop:disabled { - color: #43495a; } .osd check, .osd radio { color: #eeeeec; border-color: #3d4251; @@ -3033,7 +3010,7 @@ check, radio { -gtk-icon-shadow: none; } menu menuitem check, menu menuitem radio { margin: 0; } - menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem radio, menu menuitem radio:hover, menu menuitem radio:disabled { + menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem check:checked, menu menuitem check:checked:hover, menu menuitem check:checked:disabled, menu menuitem check:indeterminate, menu menuitem check:indeterminate:hover, menu menuitem check:indeterminate:disabled, menu menuitem radio, menu menuitem radio:hover, menu menuitem radio:disabled, menu menuitem radio:checked, menu menuitem radio:checked:hover, menu menuitem radio:checked:disabled, menu menuitem radio:indeterminate, menu menuitem radio:indeterminate:hover, menu menuitem radio:indeterminate:disabled { min-height: 14px; min-width: 14px; background-image: none; @@ -3084,16 +3061,6 @@ treeview.view check:selected:focus, treeview.view check:selected, treeview.view radio:selected:focus, treeview.view radio:selected { color: #ffffff; } -treeview.view check:selected:disabled, -treeview.view radio:selected:disabled { - color: #898a8d; } - treeview.view check:selected:disabled:backdrop, - treeview.view radio:selected:disabled:backdrop { - color: #43495a; } -treeview.view check:backdrop:selected, treeview.view check:backdrop, -treeview.view radio:backdrop:selected, -treeview.view radio:backdrop { - color: #898a8d; } /************ * GtkScale * @@ -3195,13 +3162,7 @@ scale { box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to bottom, #23252e 20%, #1a1c23 90%); } scale slider:active { - color: #eeeeec; - outline-color: rgba(238, 238, 236, 0.3); - border-color: #0d0e11; - background-image: image(#0f1014); - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - border-color: #2777ff; } + border-color: #00348d; } scale slider:disabled { border-color: #0d0e11; background-image: image(#252730); @@ -3999,14 +3960,14 @@ row { *********************/ .app-notification, .app-notification.frame { - padding: 5px; - margin: 20px; - border-radius: 5px; + padding: 10px; + border-radius: 0 0 5px 5px; background-color: #111217; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); + background-clip: padding-box; } .app-notification:backdrop, .app-notification.frame:backdrop { - box-shadow: none; + background-image: none; transition: 200ms ease-out; } .app-notification border, .app-notification.frame border { @@ -4070,8 +4031,6 @@ messagedialog .titlebar { border-style: none; border-top-left-radius: 7px; border-top-right-radius: 7px; } - messagedialog .titlebar:backdrop { - background-image: none; } messagedialog.csd.background { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } @@ -4262,186 +4221,71 @@ infobar { border-style: none; } infobar.info, infobar.question, infobar.warning, infobar.error { text-shadow: none; } - infobar.info:backdrop > revealer > box label, infobar.info:backdrop > revealer > box, infobar.info > revealer > box label, infobar.info > revealer > box, infobar.question:backdrop > revealer > box label, infobar.question:backdrop > revealer > box, infobar.question > revealer > box label, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box label, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box label, infobar.warning > revealer > box, infobar.error:backdrop > revealer > box label, infobar.error:backdrop > revealer > box, infobar.error > revealer > box label, infobar.error > revealer > box { - color: #ffffff; } + infobar.info:backdrop > revealer > box, infobar.info > revealer > box, infobar.question:backdrop > revealer > box, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box, infobar.error:backdrop > revealer > box, infobar.error > revealer > box { + background-color: #080604; + border-bottom: 1px solid #181a20; } + infobar.info:backdrop > revealer > box label, infobar.info:backdrop > revealer > box, infobar.info > revealer > box label, infobar.info > revealer > box, infobar.question:backdrop > revealer > box label, infobar.question:backdrop > revealer > box, infobar.question > revealer > box label, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box label, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box label, infobar.warning > revealer > box, infobar.error:backdrop > revealer > box label, infobar.error:backdrop > revealer > box, infobar.error > revealer > box label, infobar.error > revealer > box { + color: #eeeeec; } infobar.info:backdrop, infobar.question:backdrop, infobar.warning:backdrop, infobar.error:backdrop { text-shadow: none; } - infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { - background-color: #0d0e11; } - infobar.info *:link, infobar.info button:link, - infobar.info button:visited, infobar.question *:link, infobar.question button:link, - infobar.question button:visited, infobar.warning *:link, infobar.warning button:link, - infobar.warning button:visited, infobar.error *:link, infobar.error button:link, - infobar.error button:visited { - color: #8db7ff; } - infobar.info:backdrop > revealer > box, infobar.info > revealer > box { - background-color: #2777ff; } - infobar.info button { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #005af3; - border-bottom-color: #0047c0; - background-image: linear-gradient(to top, #2274ff 2px, #2777ff); - text-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); } - infobar.info button:hover { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #005af3; - border-bottom-color: #0047c0; - text-shadow: 0 -1px rgba(0, 0, 0, 0.4908235294); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4908235294); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to top, #2274ff, #2c7aff 1px); } - infobar.info button:active, infobar.info button:checked { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #005af3; - background-image: image(#005cf8); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); - text-shadow: none; - -gtk-icon-shadow: none; } - infobar.info button:disabled { - border-color: #005af3; - background-image: image(#276be1); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - infobar.info button:disabled label, infobar.info button:disabled { - color: #93b5f0; } - infobar.info button:backdrop { - border-color: #005af3; - background-image: image(#2777ff); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #005af3; } - infobar.info button:backdrop label, infobar.info button:backdrop { - color: #d4e4ff; } - infobar.info button:backdrop:disabled { - border-color: #005af3; - background-image: image(#276be1); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #005af3; } - infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled { - color: #739fec; } - infobar.info button:backdrop label, infobar.info button:backdrop, infobar.info button label, infobar.info button { - color: #ffffff; } - infobar.question:backdrop > revealer > box, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box { - background-color: #fd7d00; } - infobar.question button, infobar.warning button { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #ca6400; - border-bottom-color: #974b00; - background-image: linear-gradient(to top, #f87a00 2px, #fd7d00); - text-shadow: 0 -1px rgba(0, 0, 0, 0.6031372549); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6031372549); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } - infobar.question button:hover, infobar.warning button:hover { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #ca6400; - border-bottom-color: #974b00; - text-shadow: 0 -1px rgba(0, 0, 0, 0.5551372549); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5551372549); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to top, #f87a00, #ff8003 1px); } - infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #ca6400; - background-image: image(#cf6600); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); - text-shadow: none; - -gtk-icon-shadow: none; } - infobar.question button:disabled, infobar.warning button:disabled { - border-color: #ca6400; - background-image: image(#dd7108); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - infobar.question button:disabled label, infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled { - color: #eeb884; } - infobar.question button:backdrop, infobar.warning button:backdrop { - border-color: #ca6400; - background-image: image(#fd7d00); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #ca6400; } - infobar.question button:backdrop label, infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop { - color: #ffe5cc; } - infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled { - border-color: #ca6400; - background-image: image(#dd7108); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #ca6400; } - infobar.question button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled label, infobar.warning button:backdrop:disabled { - color: #e9a35e; } - infobar.question button:backdrop label, infobar.question button:backdrop, infobar.question button label, infobar.question button, infobar.warning button:backdrop label, infobar.warning button:backdrop, infobar.warning button label, infobar.warning button { - color: #ffffff; } - infobar.error:backdrop > revealer > box, infobar.error > revealer > box { - background-color: #bf1717; } - infobar.error:backdrop > revealer > box button, infobar.error > revealer > box button { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #911212; - border-bottom-color: #640c0c; - background-image: linear-gradient(to top, #ba1616 2px, #bf1717); - text-shadow: 0 -1px rgba(0, 0, 0, 0.6643137255); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6643137255); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } - infobar.error:backdrop > revealer > box button:hover, infobar.error > revealer > box button:hover { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #911212; - border-bottom-color: #640c0c; - text-shadow: 0 -1px rgba(0, 0, 0, 0.6163137255); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6163137255); + infobar.info button, infobar.question button, infobar.warning button, infobar.error button { + 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.873254902); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); } + infobar.info button:hover, infobar.question button:hover, infobar.warning button:hover, infobar.error button: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.825254902); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.825254902); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to top, #ba1616, #c41818 1px); } - infobar.error:backdrop > revealer > box button:active, infobar.error:backdrop > revealer > box button:checked, infobar.error > revealer > box button:active, infobar.error > revealer > box button:checked { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #911212; - background-image: image(#961212); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #20232b, #252831 1px); } + infobar.info button:active, infobar.info button:checked, infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked, infobar.error button:active, infobar.error button:checked { + color: #eeeeec; + outline-color: rgba(238, 238, 236, 0.3); + border-color: #0d0e11; + background-image: image(#0f1014); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } - infobar.error:backdrop > revealer > box button:disabled, infobar.error > revealer > box button:disabled { - border-color: #911212; - background-image: image(#a81a1b); + infobar.info button:disabled, infobar.question button:disabled, infobar.warning button:disabled, infobar.error button:disabled { + border-color: #0d0e11; + background-image: image(#252730); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - infobar.error:backdrop > revealer > box button:disabled label, infobar.error:backdrop > revealer > box button:disabled, infobar.error > revealer > box button:disabled label, infobar.error > revealer > box button:disabled { - color: #d48d8d; } - infobar.error:backdrop > revealer > box button:backdrop, infobar.error > revealer > box button:backdrop { - border-color: #911212; - background-image: image(#bf1717); + infobar.info button:disabled label, infobar.info button:disabled, infobar.question button:disabled label, infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled, infobar.error button:disabled label, infobar.error button:disabled { + color: #898a8d; } + infobar.info button:backdrop, infobar.question button:backdrop, infobar.warning button:backdrop, infobar.error button:backdrop { + border-color: #111317; + background-image: image(#23252e); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #911212; } - infobar.error:backdrop > revealer > box button:backdrop label, infobar.error:backdrop > revealer > box button:backdrop, infobar.error > revealer > box button:backdrop label, infobar.error > revealer > box button:backdrop { - color: #f2d1d1; } - infobar.error:backdrop > revealer > box button:backdrop:disabled, infobar.error > revealer > box button:backdrop:disabled { - border-color: #911212; - background-image: image(#a81a1b); + border-color: #0d0e11; } + infobar.info button:backdrop label, infobar.info button:backdrop, infobar.question button:backdrop label, infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop, infobar.error button:backdrop label, infobar.error button:backdrop { + color: #898a8d; } + infobar.info button:backdrop:disabled, infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled, infobar.error button:backdrop:disabled { + border-color: #111317; + background-image: image(#252730); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #911212; } - infobar.error:backdrop > revealer > box button:backdrop:disabled label, infobar.error:backdrop > revealer > box button:backdrop:disabled, infobar.error > revealer > box button:backdrop:disabled label, infobar.error > revealer > box button:backdrop:disabled { - color: #c66a6b; } - infobar.error:backdrop > revealer > box button:backdrop label, infobar.error:backdrop > revealer > box button:backdrop, infobar.error:backdrop > revealer > box button label, infobar.error:backdrop > revealer > box button, infobar.error > revealer > box button:backdrop label, infobar.error > revealer > box button:backdrop, infobar.error > revealer > box button label, infobar.error > revealer > box button { - color: #ffffff; } + border-color: #0d0e11; } + infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled, infobar.question button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled label, infobar.warning button:backdrop:disabled, infobar.error button:backdrop:disabled label, infobar.error button:backdrop:disabled { + color: #43495a; } + infobar.info button:backdrop label, infobar.info button:backdrop, infobar.info button label, infobar.info button, infobar.question button:backdrop label, infobar.question button:backdrop, infobar.question button label, infobar.question button, infobar.warning button:backdrop label, infobar.warning button:backdrop, infobar.warning button label, infobar.warning button, infobar.error button:backdrop label, infobar.error button:backdrop, infobar.error button label, infobar.error button { + color: #eeeeec; } + infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { + background-color: #0d0e11; } + infobar.info *:link, infobar.question *:link, infobar.warning *:link, infobar.error *:link { + color: #8db7ff; } /************ * Tooltips * @@ -4591,26 +4435,26 @@ colorchooser .popover.osd { decoration { border-radius: 8px 8px 0 0; border-width: 0px; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); + box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(13, 14, 17, 0.9); margin: 10px; } decoration:backdrop { - box-shadow: 0 2px 8px 0 transparent, 0 0 0 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(13, 14, 17, 0.9); transition: 200ms ease-out; } .maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; } .popup decoration { box-shadow: none; } .ssd decoration { - box-shadow: none; } + box-shadow: 0 0 0 1px rgba(13, 14, 17, 0.9); } .csd.popup decoration { border-radius: 5px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(13, 14, 17, 0.8); } tooltip.csd decoration { border-radius: 5px; box-shadow: none; } messagedialog.csd decoration { border-radius: 8px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(13, 14, 17, 0.8); } .solid-csd decoration { margin: 0; padding: 4px; @@ -4669,31 +4513,31 @@ entry selection, modelbutton.flat:selected, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { color: #ffffff; } - row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, + label:disabled selection, row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, iconview text:disabled:selected:focus, textview text:disabled:selected:focus, .view text:disabled:selected, iconview text:disabled:selected, textview text:disabled:selected, iconview text selection:disabled:focus, .view text selection:disabled, iconview text selection:disabled, - textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, + textview text selection:disabled, flowbox flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected { color: #93bbff; } - row:selected label:backdrop, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, + label:backdrop selection, row:selected label:backdrop, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, iconview text:backdrop:selected:focus, textview text:backdrop:selected:focus, .view text:backdrop:selected, iconview text:backdrop:selected, textview text:backdrop:selected, iconview text selection:backdrop:focus, .view text selection:backdrop, iconview text selection:backdrop, - textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label:backdrop selection, spinbutton:not(.vertical) selection:backdrop, + textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected { color: #d4d5d7; } - row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, + label:backdrop selection:disabled, row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected, textview text:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, - textview text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, label:disabled selection:backdrop, label:backdrop selection:disabled, spinbutton:not(.vertical) selection:backdrop:disabled, + textview text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, entry selection:backdrop:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, row:backdrop:disabled:selected, calendar:backdrop:disabled:selected { color: #5b93f3; } @@ -4788,6 +4632,8 @@ stackswitcher button.text-button.circular { popover.emoji-picker { padding-left: 0; padding-right: 0; } + popover.emoji-picker entry.search { + margin: 3px 5px 5px 5px; } button.emoji-section { border-color: transparent; @@ -4803,10 +4649,14 @@ button.emoji-section { box-shadow: none; text-shadow: none; outline-offset: -5px; } + button.emoji-section:first-child { + margin-left: 7px; } + button.emoji-section:last-child { + margin-right: 7px; } button.emoji-section:backdrop:not(:checked) { border-color: transparent; } button.emoji-section:hover { - border-color: #0d0e11; } + border-color: rgba(238, 238, 236, 0.1); } button.emoji-section:checked { border-color: #2777ff; } button.emoji-section label { @@ -4819,10 +4669,10 @@ button.emoji-section { popover.emoji-picker .emoji { font-size: x-large; - padding: 6px; - border-radius: 6px; } + padding: 6px; } popover.emoji-picker .emoji :hover { - background: #2777ff; } + background: #2777ff; + border-radius: 6px; } popover.emoji-completion arrow { border: none; @@ -4834,6 +4684,290 @@ popover.emoji-completion contents row box { popover.emoji-completion .emoji:hover { background: #2e313d; } +* { + outline-color: alpha(currentColor,0.07); + outline-style: solid; + outline-offset: -2px; + outline-width: 2px; + -gtk-outline-radius: 6px; } + +.titlebar stackswitcher button:checked:active, .titlebar stackswitcher button:checked, +.titlebar button.toggle:active, +.titlebar button.toggle:checked, +headerbar stackswitcher button:checked:active, +headerbar stackswitcher button:checked, +headerbar button.toggle:active, +headerbar button.toggle:checked, +button:active, +button:checked { + background: image(#040405); + box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); } + +switch:hover slider, scale slider:active { + background-image: image(#0f1014); } + +/********** + * Switch * + **********/ +switch slider { + color: #eeeeec; + outline-color: rgba(238, 238, 236, 0.3); + border-color: black; + text-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873254902); + background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + border: 1px solid black; + border-radius: 50%; + transition-property: background, border, box-shadow; } +switch:hover slider { + border-color: #2777ff; } +switch:checked slider { + border-color: black; } +switch:backdrop slider { + border-color: #111317; } +switch:backdrop:checked slider { + border-color: #111317; } + +/************ + * GtkScale * + ************/ +scale slider:active { + border-color: #2777ff; } + +/*************** + * Header bars * + ***************/ +.titlebar, +headerbar { + border-color: #2777ff; + 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); + background-repeat: no-repeat; + background-position: left; } + .titlebar:backdrop, + headerbar:backdrop { + background-image: -gtk-scaled(url("assets/kali-headerbar-logo-dark.png"), url("assets/kali-headerbar-logo-dark@2.png")); + background-repeat: no-repeat; + background-position: left; } + +/************** + * GtkInfoBar * + **************/ +infobar, infobar.info, infobar.question, infobar.warning, infobar.error { + border-style: none; + text-shadow: none; } + infobar:backdrop > revealer > box label, infobar:backdrop > revealer > box, infobar > revealer > box label, infobar > revealer > box, infobar.info:backdrop > revealer > box label, infobar.info:backdrop > revealer > box, infobar.info > revealer > box label, infobar.info > revealer > box, infobar.question:backdrop > revealer > box label, infobar.question:backdrop > revealer > box, infobar.question > revealer > box label, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box label, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box label, infobar.warning > revealer > box, infobar.error:backdrop > revealer > box label, infobar.error:backdrop > revealer > box, infobar.error > revealer > box label, infobar.error > revealer > box { + color: #ffffff; } + infobar:backdrop, infobar.info:backdrop, infobar.question:backdrop, infobar.warning:backdrop, infobar.error:backdrop { + text-shadow: none; } + infobar selection, infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { + background-color: #0d0e11; } + infobar *:link, infobar.info *:link, infobar.question *:link, infobar.warning *:link, infobar.error *:link { + color: #8db7ff; } +infobar.info:backdrop > revealer > box, infobar.info > revealer > box { + background-color: #2777ff; } +infobar.info button { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #005af3; + border-bottom-color: #0047c0; + background-image: linear-gradient(to top, #2274ff 2px, #2777ff); + text-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); } + infobar.info button:hover { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #005af3; + border-bottom-color: #0047c0; + text-shadow: 0 -1px rgba(0, 0, 0, 0.4908235294); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4908235294); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #2274ff, #2c7aff 1px); } + infobar.info button:active, infobar.info button:checked { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #005af3; + background-image: image(#005cf8); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + infobar.info button:disabled { + border-color: #005af3; + background-image: image(#276be1); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + infobar.info button:disabled label, infobar.info button:disabled { + color: #93b5f0; } + infobar.info button:backdrop { + border-color: #005af3; + background-image: image(#2777ff); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #005af3; } + infobar.info button:backdrop label, infobar.info button:backdrop { + color: #d4e4ff; } + infobar.info button:backdrop:disabled { + border-color: #005af3; + background-image: image(#276be1); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #005af3; } + infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled { + color: #739fec; } + infobar.info button:backdrop label, infobar.info button:backdrop, infobar.info button label, infobar.info button { + color: #ffffff; } +infobar.question:backdrop > revealer > box, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box { + background-color: #fd7d00; } +infobar.question button, infobar.warning button { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #ca6400; + border-bottom-color: #974b00; + background-image: linear-gradient(to top, #f87a00 2px, #fd7d00); + text-shadow: 0 -1px rgba(0, 0, 0, 0.6031372549); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6031372549); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } + infobar.question button:hover, infobar.warning button:hover { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #ca6400; + border-bottom-color: #974b00; + text-shadow: 0 -1px rgba(0, 0, 0, 0.5551372549); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5551372549); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #f87a00, #ff8003 1px); } + infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #ca6400; + background-image: image(#cf6600); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + infobar.question button:disabled, infobar.warning button:disabled { + border-color: #ca6400; + background-image: image(#dd7108); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + infobar.question button:disabled label, infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled { + color: #eeb884; } + infobar.question button:backdrop, infobar.warning button:backdrop { + border-color: #ca6400; + background-image: image(#fd7d00); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #ca6400; } + infobar.question button:backdrop label, infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop { + color: #ffe5cc; } + infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled { + border-color: #ca6400; + background-image: image(#dd7108); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #ca6400; } + infobar.question button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled label, infobar.warning button:backdrop:disabled { + color: #e9a35e; } + infobar.question button:backdrop label, infobar.question button:backdrop, infobar.question button label, infobar.question button, infobar.warning button:backdrop label, infobar.warning button:backdrop, infobar.warning button label, infobar.warning button { + color: #ffffff; } +infobar.error:backdrop > revealer > box, infobar.error > revealer > box { + background-color: #bf1717; } + infobar.error:backdrop > revealer > box button, infobar.error > revealer > box button { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #911212; + border-bottom-color: #640c0c; + background-image: linear-gradient(to top, #ba1616 2px, #bf1717); + text-shadow: 0 -1px rgba(0, 0, 0, 0.6643137255); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6643137255); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } + infobar.error:backdrop > revealer > box button:hover, infobar.error > revealer > box button:hover { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #911212; + border-bottom-color: #640c0c; + text-shadow: 0 -1px rgba(0, 0, 0, 0.6163137255); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6163137255); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #ba1616, #c41818 1px); } + infobar.error:backdrop > revealer > box button:active, infobar.error:backdrop > revealer > box button:checked, infobar.error > revealer > box button:active, infobar.error > revealer > box button:checked { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #911212; + background-image: image(#961212); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + infobar.error:backdrop > revealer > box button:disabled, infobar.error > revealer > box button:disabled { + border-color: #911212; + background-image: image(#a81a1b); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + infobar.error:backdrop > revealer > box button:disabled label, infobar.error:backdrop > revealer > box button:disabled, infobar.error > revealer > box button:disabled label, infobar.error > revealer > box button:disabled { + color: #d48d8d; } + infobar.error:backdrop > revealer > box button:backdrop, infobar.error > revealer > box button:backdrop { + border-color: #911212; + background-image: image(#bf1717); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #911212; } + infobar.error:backdrop > revealer > box button:backdrop label, infobar.error:backdrop > revealer > box button:backdrop, infobar.error > revealer > box button:backdrop label, infobar.error > revealer > box button:backdrop { + color: #f2d1d1; } + infobar.error:backdrop > revealer > box button:backdrop:disabled, infobar.error > revealer > box button:backdrop:disabled { + border-color: #911212; + background-image: image(#a81a1b); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #911212; } + infobar.error:backdrop > revealer > box button:backdrop:disabled label, infobar.error:backdrop > revealer > box button:backdrop:disabled, infobar.error > revealer > box button:backdrop:disabled label, infobar.error > revealer > box button:backdrop:disabled { + color: #c66a6b; } + infobar.error:backdrop > revealer > box button:backdrop label, infobar.error:backdrop > revealer > box button:backdrop, infobar.error:backdrop > revealer > box button label, infobar.error:backdrop > revealer > box button, infobar.error > revealer > box button:backdrop label, infobar.error > revealer > box button:backdrop, infobar.error > revealer > box button label, infobar.error > revealer > box button { + color: #ffffff; } + +/********************* + * App Notifications * + *********************/ +.app-notification, +.app-notification.frame { + padding: 5px; + margin: 20px; + border-radius: 5px; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); + background-image: none; } + .app-notification:backdrop, + .app-notification.frame:backdrop { + box-shadow: none; } + +/*********** + * Dialogs * + ***********/ +messagedialog .titlebar:backdrop { + background-image: none; } + +/********************** + * Window Decorations * + *********************/ +decoration { + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } + decoration:backdrop { + box-shadow: 0 2px 8px 0 transparent, 0 0 0 3px rgba(0, 0, 0, 0.25); } + .ssd decoration { + box-shadow: none; } + .csd.popup decoration { + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } + messagedialog.csd decoration { + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } + /* Nautilus */ @define-color disk_space_unknown #383c4a; @define-color disk_space_used #2777ff; diff --git a/share/themes/Kali-Light/gtk-3.0/gtk.css b/share/themes/Kali-Light/gtk-3.0/gtk.css index e7553a61..162ea39c 100644 --- a/share/themes/Kali-Light/gtk-3.0/gtk.css +++ b/share/themes/Kali-Light/gtk-3.0/gtk.css @@ -1,3 +1,6 @@ +/*************************** + * Check and Radio buttons * + ***************************/ @import url("applications/nautilus/Adwaita.css"); * { padding: 0; @@ -9,11 +12,11 @@ -GtkWidget-text-handle-height: 24; -GtkDialog-button-spacing: 4; -GtkDialog-action-area-border: 0; - outline-color: alpha(currentColor,0.07); - outline-style: solid; - outline-offset: -2px; - outline-width: 2px; - -gtk-outline-radius: 6px; + outline-color: alpha(currentColor,0.3); + outline-style: dashed; + outline-offset: -3px; + outline-width: 1px; + -gtk-outline-radius: 3px; -gtk-secondary-caret-color: #2777ff; } /*************** @@ -475,7 +478,7 @@ button { text-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); } - notebook > header > tabs > arrow, button.sidebar-button, button.titlebutton, + notebook > header > tabs > arrow, button.sidebar-button, button.titlebutton, notebook > header > tabs > arrow.flat, button.flat.titlebutton, button.flat { border-color: transparent; background-color: transparent; @@ -484,11 +487,11 @@ button { text-shadow: none; -gtk-icon-shadow: none; transition: none; } - notebook > header > tabs > arrow:hover, button.sidebar-button:hover, button.titlebutton:hover, + notebook > header > tabs > arrow:hover, button.sidebar-button:hover, button.titlebutton:hover, notebook > header > tabs > arrow.flat:hover, button.flat.titlebutton:hover, button.flat:hover { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; } - notebook > header > tabs > arrow:hover:active, button.sidebar-button:hover:active, button.titlebutton:hover:active, + notebook > header > tabs > arrow:hover:active, button.sidebar-button:hover:active, button.titlebutton:hover:active, notebook > header > tabs > arrow.flat:hover:active, button.flat.titlebutton:hover:active, button.flat:hover:active { transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } notebook > header > tabs > arrow:hover, button.titlebutton:hover, @@ -509,11 +512,11 @@ button { outline-color: rgba(92, 97, 108, 0.3); border-color: #d1d1d1; background-image: image(#dbdbdb); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; transition-duration: 50ms; } - notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, button.titlebutton:backdrop, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, + notebook > header > tabs > arrow:backdrop.flat, button.titlebutton:backdrop.flat, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, button:backdrop.flat, button:backdrop { border-color: #dadada; @@ -523,13 +526,13 @@ button { box-shadow: inset 0 1px rgba(255, 255, 255, 0); transition: 200ms ease-out; -gtk-icon-effect: none; } - notebook > header > tabs > arrow:backdrop label, button.sidebar-button:backdrop label, button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, button.titlebutton:backdrop, notebook > header > tabs > arrow:backdrop label, button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, + notebook > header > tabs > arrow:backdrop.flat label, button.titlebutton:backdrop.flat label, notebook > header > tabs > arrow:backdrop.flat, button.titlebutton:backdrop.flat, notebook > header > tabs > arrow:backdrop label, button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.titlebutton:backdrop, button:backdrop.flat label, button:backdrop.flat, button:backdrop label, button:backdrop { color: #aeb0b6; } - notebook > header > tabs > arrow:backdrop:active, button.sidebar-button:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.sidebar-button:backdrop:checked, button.titlebutton:backdrop:checked, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, + notebook > header > tabs > arrow:backdrop.flat:active, button.titlebutton:backdrop.flat:active, notebook > header > tabs > arrow:backdrop.flat:checked, button.titlebutton:backdrop.flat:checked, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, button:backdrop.flat:active, button:backdrop.flat:checked, button:backdrop:active, @@ -537,7 +540,7 @@ button { border-color: #dadada; background-image: image(#eaeaea); box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - notebook > header > tabs > arrow:backdrop:active label, button.sidebar-button:backdrop:active label, button.titlebutton:backdrop:active label, notebook > header > tabs > arrow:backdrop:active, button.sidebar-button:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked label, button.sidebar-button:backdrop:checked label, button.titlebutton:backdrop:checked label, notebook > header > tabs > arrow:backdrop:checked, button.sidebar-button:backdrop:checked, button.titlebutton:backdrop:checked, notebook > header > tabs > arrow:backdrop:active label, button.titlebutton:backdrop:active label, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked label, button.titlebutton:backdrop:checked label, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, + notebook > header > tabs > arrow:backdrop.flat:active label, button.titlebutton:backdrop.flat:active label, notebook > header > tabs > arrow:backdrop.flat:active, button.titlebutton:backdrop.flat:active, notebook > header > tabs > arrow:backdrop.flat:checked label, button.titlebutton:backdrop.flat:checked label, notebook > header > tabs > arrow:backdrop.flat:checked, button.titlebutton:backdrop.flat:checked, notebook > header > tabs > arrow:backdrop:active label, button.titlebutton:backdrop:active label, notebook > header > tabs > arrow:backdrop:active, button.titlebutton:backdrop:active, notebook > header > tabs > arrow:backdrop:checked label, button.titlebutton:backdrop:checked label, notebook > header > tabs > arrow:backdrop:checked, button.titlebutton:backdrop:checked, button:backdrop.flat:active label, button:backdrop.flat:active, button:backdrop.flat:checked label, @@ -547,7 +550,7 @@ button { button:backdrop:checked label, button:backdrop:checked { color: #aeb0b6; } - notebook > header > tabs > arrow:backdrop:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, + notebook > header > tabs > arrow:backdrop.flat:disabled, button.titlebutton:backdrop.flat:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, button:backdrop.flat:disabled, button:backdrop:disabled { border-color: #dadada; @@ -555,13 +558,13 @@ button { text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - notebook > header > tabs > arrow:backdrop:disabled label, button.sidebar-button:backdrop:disabled label, button.titlebutton:backdrop:disabled label, notebook > header > tabs > arrow:backdrop:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, notebook > header > tabs > arrow:backdrop:disabled label, button.titlebutton:backdrop:disabled label, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, + notebook > header > tabs > arrow:backdrop.flat:disabled label, button.titlebutton:backdrop.flat:disabled label, notebook > header > tabs > arrow:backdrop.flat:disabled, button.titlebutton:backdrop.flat:disabled, notebook > header > tabs > arrow:backdrop:disabled label, button.titlebutton:backdrop:disabled label, notebook > header > tabs > arrow:backdrop:disabled, button.titlebutton:backdrop:disabled, button:backdrop.flat:disabled label, button:backdrop.flat:disabled, button:backdrop:disabled label, button:backdrop:disabled { color: #d9d9d9; } - notebook > header > tabs > arrow:backdrop:disabled:active, button.sidebar-button:backdrop:disabled:active, button.titlebutton:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.sidebar-button:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, button.titlebutton:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:checked, + notebook > header > tabs > arrow:backdrop.flat:disabled:active, button.titlebutton:backdrop.flat:disabled:active, notebook > header > tabs > arrow:backdrop.flat:disabled:checked, button.titlebutton:backdrop.flat:disabled:checked, notebook > header > tabs > arrow:backdrop:disabled:active, button.titlebutton:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:checked, button:backdrop.flat:disabled:active, button:backdrop.flat:disabled:checked, button:backdrop:disabled:active, @@ -569,13 +572,13 @@ button { border-color: #dadada; background-image: image(#eaeaea); box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - notebook > header > tabs > arrow:backdrop:disabled:active label, button.sidebar-button:backdrop:disabled:active label, button.titlebutton:backdrop:disabled:active label, notebook > header > tabs > arrow:backdrop:disabled:checked label, button.sidebar-button:backdrop:disabled:checked label, button.titlebutton:backdrop:disabled:checked label, notebook > header > tabs > arrow:backdrop:disabled:active label, button.titlebutton:backdrop:disabled:active label, notebook > header > tabs > arrow:backdrop:disabled:checked label, button.titlebutton:backdrop:disabled:checked label, + notebook > header > tabs > arrow:backdrop.flat:disabled:active label, button.titlebutton:backdrop.flat:disabled:active label, notebook > header > tabs > arrow:backdrop.flat:disabled:checked label, button.titlebutton:backdrop.flat:disabled:checked label, notebook > header > tabs > arrow:backdrop:disabled:active label, button.titlebutton:backdrop:disabled:active label, notebook > header > tabs > arrow:backdrop:disabled:checked label, button.titlebutton:backdrop:disabled:checked label, button:backdrop.flat:disabled:active label, button:backdrop.flat:disabled:checked label, button:backdrop:disabled:active label, button:backdrop:disabled:checked label { color: #d9d9d9; } - notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, button.titlebutton:backdrop, notebook > header > tabs > arrow:disabled, button.sidebar-button:disabled, button.titlebutton:disabled, notebook > header > tabs > arrow:backdrop:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, + notebook > header > tabs > arrow.flat:backdrop, button.flat.titlebutton:backdrop, notebook > header > tabs > arrow.flat:disabled, button.flat.titlebutton:disabled, notebook > header > tabs > arrow.flat:backdrop:disabled, button.flat.titlebutton:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { @@ -847,7 +850,7 @@ button.suggested-action { outline-color: rgba(255, 255, 255, 0.3); border-color: #005af3; background-image: image(#0053df); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .selection-mode button.titlebutton:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { @@ -979,7 +982,7 @@ button.destructive-action { outline-color: rgba(255, 255, 255, 0.3); border-color: #a61414; background-image: image(#941111); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } button.destructive-action:backdrop, button.destructive-action.flat:backdrop { @@ -1179,7 +1182,7 @@ button.circular { outline-color: rgba(92, 97, 108, 0.3); border-color: #d1d1d1; background-image: image(#dbdbdb); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .inline-toolbar toolbutton > button:disabled { @@ -1231,31 +1234,27 @@ entry, .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button border-radius: 0; border-right-style: none; } -.linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > -entry:first-child, .inline-toolbar button:first-child, .linked > button:first-child, toolbar.inline-toolbar toolbutton:first-child > button.flat, -toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo, filechooser .path-bar.linked > button:dir(ltr):first-child, filechooser .path-bar.linked > button:dir(rtl):last-child { +toolbar.inline-toolbar toolbutton:first-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > +entry:first-child, .inline-toolbar button:first-child, .linked > button:first-child, filechooser .path-bar.linked > button:dir(ltr):first-child, filechooser .path-bar.linked > button:dir(rtl):last-child, combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: none; } -.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > -entry:last-child, .inline-toolbar button:last-child, .linked > button:last-child, toolbar.inline-toolbar toolbutton:last-child > button.flat, -toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo, filechooser .path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > button:dir(rtl):first-child { +toolbar.inline-toolbar toolbutton:last-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > +entry:last-child, .inline-toolbar button:last-child, .linked > button:last-child, filechooser .path-bar.linked > button:dir(ltr):last-child, filechooser .path-bar.linked > button:dir(rtl):first-child, combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right-style: solid; } -.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > -entry:only-child, .inline-toolbar button:only-child, .linked > button:only-child, toolbar.inline-toolbar toolbutton:only-child > button.flat, -toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > combobox:only-child > box > button.combo { - border-radius: 5px; - border-style: solid; } - -filechooser .path-bar.linked > button:only-child { +toolbar.inline-toolbar toolbutton:only-child > button.flat, +toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > +entry:only-child, .inline-toolbar button:only-child, .linked > button:only-child, filechooser .path-bar.linked > button:only-child, .linked:not(.vertical) > combobox:only-child > box > button.combo { border-radius: 5px; border-style: solid; } @@ -1268,11 +1267,13 @@ entry, .linked.vertical > button, .linked.vertical > button:hover, .linked.verti entry:first-child, .linked.vertical > button:first-child, .linked.vertical > combobox:first-child > box > button.combo { border-top-left-radius: 5px; border-top-right-radius: 5px; } + .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child, .linked.vertical > button:last-child, .linked.vertical > combobox:last-child > box > button.combo { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; } + .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child, .linked.vertical > button:only-child, .linked.vertical > combobox:only-child > box > button.combo { border-radius: 5px; @@ -1343,88 +1344,69 @@ list row button.image-button:not(.flat) { outline-color: rgba(92, 97, 108, 0.3); border-color: #d1d1d1; background-image: image(#dbdbdb); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } /********* * Links * *********/ -button:link > label, -button:visited > label, *:link, button:link, -button:visited { +button:link, +button:visited, button:link > label, +button:visited > label, *:link { color: #005af3; } - button:link > label:visited, - button:visited > label:visited, *:link:visited, - button:visited { + button:visited, button:link > label:visited, + button:visited > label:visited, *:link:visited { color: #0047c0; } - *:selected button:link > label:visited, + *:selected button:visited, *:selected button:link > label:visited, *:selected button:visited > label:visited, - *:selected *:link:visited, - *:selected button:visited:link, - *:selected button:visited { + *:selected *:link:visited { color: #a9c9ff; } - button:link > label:hover, - button:visited > label:hover, *:link:hover, button:hover:link, - button:hover:visited { + button:hover:link, + button:hover:visited, button:link > label:hover, + button:visited > label:hover, *:link:hover { color: #2777ff; } - *:selected button:link > label:hover, - *:selected button:visited > label:hover, - *:selected *:link:hover, *:selected button:hover:link, - *:selected button:hover:visited { + *:selected button:hover:visited, *:selected button:link > label:hover, + *:selected button:visited > label:hover, + *:selected *:link:hover { color: #e9f1ff; } - button:link > label:active, - button:visited > label:active, *:link:active, button:active:link, - button:active:visited { + button:active:link, + button:active:visited, button:link > label:active, + button:visited > label:active, *:link:active { color: #005af3; } - *:selected button:link > label:active, - *:selected button:visited > label:active, - *:selected *:link:active, *:selected button:active:link, - *:selected button:active:visited { + *:selected button:active:visited, *:selected button:link > label:active, + *:selected button:visited > label:active, + *:selected *:link:active { color: #d4e4ff; } - button:link > label:disabled, - button:visited > label:disabled, button:link > label:disabled:backdrop, + button:disabled:link, + button:disabled:visited, button:link > label:disabled, + button:visited > label:disabled, button:disabled:backdrop:link, + button:disabled:backdrop:visited, button:link > label:disabled:backdrop, button:visited > label:disabled:backdrop, *:link:disabled, - button:disabled:link, - button:disabled:visited, - *:link:disabled:backdrop, - button:disabled:backdrop:link, - button:disabled:backdrop:visited { + *:link:disabled:backdrop { color: rgba(122, 122, 122, 0.8); } - button:link > label:backdrop:backdrop:hover, - button:visited > label:backdrop:backdrop:hover, button:link > label:backdrop:backdrop:hover:selected, - button:visited > label:backdrop:backdrop:hover:selected, button:link > label:backdrop, + button:backdrop:backdrop:hover:link, + button:backdrop:backdrop:hover:visited, button:link > label:backdrop:backdrop:hover, + button:visited > label:backdrop:backdrop:hover, button:backdrop:backdrop:hover:selected:link, + button:backdrop:backdrop:hover:selected:visited, button:link > label:backdrop:backdrop:hover:selected, + button:visited > label:backdrop:backdrop:hover:selected, button:backdrop:link, + button:backdrop:visited, button:link > label:backdrop, button:visited > label:backdrop, *:link:backdrop:backdrop:hover, - button:backdrop:backdrop:hover:link, - button:backdrop:backdrop:hover:visited, *:link:backdrop:backdrop:hover:selected, - button:backdrop:backdrop:hover:selected:link, - button:backdrop:backdrop:hover:selected:visited, - .selection-mode .titlebar:not(headerbar) .subtitle:backdrop:backdrop:hover:link, - .selection-mode.titlebar:not(headerbar) .subtitle:backdrop:backdrop:hover:link, - .selection-mode headerbar .subtitle:backdrop:backdrop:hover:link, - headerbar.selection-mode .subtitle:backdrop:backdrop:hover:link, - *:link:backdrop, - button:backdrop:link, - button:backdrop:visited { + *:link:backdrop { color: #2777ff; } - button:link > label:selected, - button:visited > label:selected, *:selected button:link > label, + .selection-mode .titlebar:not(headerbar) .subtitle:link, .selection-mode.titlebar:not(headerbar) .subtitle:link, + .selection-mode headerbar .subtitle:link, headerbar.selection-mode .subtitle:link, button:selected:link, + button:selected:visited, button:link > label:selected, + button:visited > label:selected, *:selected button:link, + *:selected button:visited, *:selected button:link > label, *:selected button:visited > label, *:link:selected, - button:selected:link, - button:selected:visited, - .selection-mode .titlebar:not(headerbar) .subtitle:link, - .selection-mode.titlebar:not(headerbar) .subtitle:link, - .selection-mode headerbar .subtitle:link, - headerbar.selection-mode .subtitle:link, - *:selected *:link, - *:selected button:link, - *:selected button:visited { + *:selected *:link { color: #d4e4ff; } button:link, @@ -1695,21 +1677,17 @@ searchbar > revealer > box { min-height: 40px; border-width: 0 0 1px; border-style: solid; - border-color: #2777ff; + border-color: #c2c2c2; border-radius: 0; - background: #fafafa -gtk-scaled(url("assets/kali-headerbar-logo.png"), url("assets/kali-headerbar-logo@2.png")), linear-gradient(to top, whitesmoke, #fcfcfc); + background: #e6e6e6 linear-gradient(to top, #e0e0e0, #e8e8e8); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); - background-repeat: no-repeat; - background-position: left; /* Darken switchbuttons for headerbars. issue #1588 */ /* hide the close button separator */ } .titlebar:backdrop:not(headerbar), headerbar:backdrop { border-color: #dadada; background-color: #ffffff; - background-image: -gtk-scaled(url("assets/kali-headerbar-logo.png"), url("assets/kali-headerbar-logo@2.png")); - background-repeat: no-repeat; - background-position: left; + background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); transition: 200ms ease-out; } .titlebar:not(headerbar) .title, @@ -1726,7 +1704,7 @@ searchbar > revealer > box { .titlebar:not(headerbar) button.toggle:checked, headerbar stackswitcher button:checked, headerbar button.toggle:checked { - background: image(#ededed); + background: image(#d4d4d4); border-color: #c9c9c9; border-top-color: #bdbdbd; } .titlebar:not(headerbar) stackswitcher button:checked:backdrop, @@ -1797,7 +1775,7 @@ searchbar > revealer > box { outline-color: rgba(255, 255, 255, 0.3); border-color: #005af3; background-image: image(#0053df); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } .selection-mode .titlebar:not(headerbar) button:backdrop.flat, .selection-mode .titlebar:not(headerbar) button:backdrop, .selection-mode.titlebar:not(headerbar) button:backdrop.flat, .selection-mode.titlebar:not(headerbar) button:backdrop, @@ -1926,7 +1904,7 @@ searchbar > revealer > box { outline-color: rgba(92, 97, 108, 0.3); border-color: #d1d1d1; background-image: image(#dbdbdb); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; border-color: #0051da; } @@ -2235,8 +2213,9 @@ menubar, .menubar > menuitem { min-height: 16px; padding: 4px 8px; } - .csd menubar > menuitem menu, menubar > menuitem menu, - .csd .menubar > menuitem menu, .menubar > menuitem menu { + menubar > menuitem menu:dir(rtl), menubar > menuitem menu:dir(ltr), + .menubar > menuitem menu:dir(rtl), + .menubar > menuitem menu:dir(ltr) { border-radius: 0; padding: 0; } menubar > menuitem:hover, @@ -2733,30 +2712,27 @@ switch { margin: -1px; min-width: 24px; min-height: 24px; + border: 1px solid; + border-radius: 50%; + transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + -gtk-outline-radius: 20px; color: #5c616c; outline-color: rgba(92, 97, 108, 0.3); border-color: #c2c2c2; text-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); background-image: linear-gradient(to bottom, white 20%, #ffffff 90%); - box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - border: 1px solid #bababa; - border-radius: 100%; - transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); - transition-property: background, border, box-shadow; - -gtk-outline-radius: 20px; } + box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } switch image { color: transparent; } switch:hover slider { color: #5c616c; outline-color: rgba(92, 97, 108, 0.3); - border-color: #d1d1d1; - background-image: image(white); - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(0, 0, 0, 0.1); + border-color: #c2c2c2; box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - border-color: #2777ff; } + background-image: linear-gradient(to bottom, white 10%, white 90%); } switch:checked slider { - border-color: #0051da; } + border: 1px solid #0051da; } switch:disabled slider { border-color: #d1d1d1; background-image: image(#fdfdfd); @@ -2771,8 +2747,7 @@ switch { background-image: image(#ffffff); text-shadow: none; -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #dadada; } + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } switch:backdrop slider label, switch:backdrop slider { color: #aeb0b6; } switch:backdrop:checked slider { @@ -2929,14 +2904,7 @@ check, radio { min-height: 14px; min-width: 14px; border: 1px solid; - -gtk-icon-source: none; - color: #5c616c; - outline-color: rgba(92, 97, 108, 0.3); - border-color: #c2c2c2; - text-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); - -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); - background-image: linear-gradient(to bottom, white 20%, #ffffff 90%); - box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } + -gtk-icon-source: none; } check:only-child, radio:only-child { margin: 0; } @@ -2948,59 +2916,68 @@ check, radio { popover radio.right:dir(ltr) { margin-left: 12px; margin-right: 0; } - check:hover, radio:hover { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #0047c0; - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to bottom, #5594ff 10%, #3b84ff 90%); } - check:hover:not(:checked), radio:hover:not(:checked) { - color: #5c616c; - outline-color: rgba(92, 97, 108, 0.3); + check, radio { + background-clip: padding-box; + background-image: linear-gradient(to bottom, white 20%, white 90%); border-color: #c2c2c2; - box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to bottom, white 10%, white 90%); } + box-shadow: 0 1px rgba(0, 0, 0, 0.05); + color: #5c616c; } + check:hover, radio:hover { + background-image: image(#f2f2f2); } check:active, radio:active { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #005af3; - background-image: image(#0053df); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); - text-shadow: none; - -gtk-icon-shadow: none; } - check:checked, radio:checked { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #0047c0; - text-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); - background-image: linear-gradient(to bottom, #4187ff 20%, #2777ff 90%); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } + box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.2); } check:disabled, radio:disabled { - border-color: #d1d1d1; - background-image: image(#fdfdfd); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - check:disabled label, check:disabled, radio:disabled label, radio:disabled { - color: #aeb0b6; } + box-shadow: none; + color: rgba(92, 97, 108, 0.7); } + check:backdrop, radio:backdrop { + background-image: image(white); + box-shadow: none; + color: #5c616c; } + check:backdrop:disabled, radio:backdrop:disabled { + box-shadow: none; + color: rgba(92, 97, 108, 0.7); } + check:checked, radio:checked { + background-clip: border-box; + background-image: linear-gradient(to bottom, #4187ff 20%, #2777ff 90%); + border-color: #2777ff; + box-shadow: 0 1px rgba(0, 0, 0, 0.05); + color: #ffffff; } + check:checked:hover, radio:checked:hover { + background-image: linear-gradient(to bottom, #5594ff 10%, #3b84ff 90%); } + check:checked:active, radio:checked:active { + box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.2); } + check:checked:disabled, radio:checked:disabled { + box-shadow: none; + color: rgba(255, 255, 255, 0.7); } + check:checked:backdrop, radio:checked:backdrop { + background-image: image(#2777ff); + box-shadow: none; + color: #ffffff; } + check:checked:backdrop:disabled, radio:checked:backdrop:disabled { + box-shadow: none; + color: rgba(255, 255, 255, 0.7); } + check:indeterminate, radio:indeterminate { + background-clip: border-box; + background-image: linear-gradient(to bottom, #4187ff 20%, #2777ff 90%); + border-color: #2777ff; + box-shadow: 0 1px rgba(0, 0, 0, 0.05); + color: #ffffff; } + check:indeterminate:hover, radio:indeterminate:hover { + background-image: linear-gradient(to bottom, #5594ff 10%, #3b84ff 90%); } + check:indeterminate:active, radio:indeterminate:active { + box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.2); } + check:indeterminate:disabled, radio:indeterminate:disabled { + box-shadow: none; + color: rgba(255, 255, 255, 0.7); } + check:indeterminate:backdrop, radio:indeterminate:backdrop { + background-image: image(#2777ff); + box-shadow: none; + color: #ffffff; } + check:indeterminate:backdrop:disabled, radio:indeterminate:backdrop:disabled { + box-shadow: none; + color: rgba(255, 255, 255, 0.7); } check:backdrop, radio:backdrop { - border-color: #dadada; - background-image: image(#ffffff); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); transition: 200ms ease-out; } - check:backdrop label, check:backdrop, radio:backdrop label, radio:backdrop { - color: #aeb0b6; } - check:backdrop:disabled, radio:backdrop:disabled { - border-color: #dadada; - background-image: image(#fdfdfd); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - check:backdrop:disabled label, check:backdrop:disabled, radio:backdrop:disabled label, radio:backdrop:disabled { - color: #d9d9d9; } row:selected check, row:selected radio { border-color: #0051da; } .osd check, .osd radio { @@ -3053,7 +3030,7 @@ check, radio { -gtk-icon-shadow: none; } menu menuitem check, menu menuitem radio { margin: 0; } - menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem radio, menu menuitem radio:hover, menu menuitem radio:disabled { + menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem check:checked, menu menuitem check:checked:hover, menu menuitem check:checked:disabled, menu menuitem check:indeterminate, menu menuitem check:indeterminate:hover, menu menuitem check:indeterminate:disabled, menu menuitem radio, menu menuitem radio:hover, menu menuitem radio:disabled, menu menuitem radio:checked, menu menuitem radio:checked:hover, menu menuitem radio:checked:disabled, menu menuitem radio:indeterminate, menu menuitem radio:indeterminate:hover, menu menuitem radio:indeterminate:disabled { min-height: 14px; min-width: 14px; background-image: none; @@ -3105,16 +3082,6 @@ treeview.view radio:selected:focus, treeview.view radio:selected { color: #ffffff; border-color: #0051da; } -treeview.view check:selected:disabled, -treeview.view radio:selected:disabled { - color: #aeb0b6; } - treeview.view check:selected:disabled:backdrop, - treeview.view radio:selected:disabled:backdrop { - color: #d9d9d9; } -treeview.view check:backdrop:selected, treeview.view check:backdrop, -treeview.view radio:backdrop:selected, -treeview.view radio:backdrop { - color: #aeb0b6; } /************ * GtkScale * @@ -3216,13 +3183,7 @@ scale { box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to bottom, white 10%, white 90%); } scale slider:active { - color: #5c616c; - outline-color: rgba(92, 97, 108, 0.3); - border-color: #d1d1d1; - background-image: image(white); - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - border-color: #2777ff; } + border-color: #0051da; } scale slider:disabled { border-color: #d1d1d1; background-image: image(#fdfdfd); @@ -4020,14 +3981,14 @@ row { *********************/ .app-notification, .app-notification.frame { - padding: 5px; - margin: 20px; - border-radius: 5px; + padding: 10px; + border-radius: 0 0 5px 5px; background-color: #272a34; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); + background-clip: padding-box; } .app-notification:backdrop, .app-notification.frame:backdrop { - box-shadow: none; + background-image: none; transition: 200ms ease-out; } .app-notification border, .app-notification.frame border { @@ -4091,8 +4052,6 @@ messagedialog .titlebar { border-style: none; border-top-left-radius: 7px; border-top-right-radius: 7px; } - messagedialog .titlebar:backdrop { - background-image: none; } messagedialog.csd.background { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } @@ -4283,186 +4242,71 @@ infobar { border-style: none; } infobar.info, infobar.question, infobar.warning, infobar.error { text-shadow: none; } - infobar.info:backdrop > revealer > box label, infobar.info:backdrop > revealer > box, infobar.info > revealer > box label, infobar.info > revealer > box, infobar.question:backdrop > revealer > box label, infobar.question:backdrop > revealer > box, infobar.question > revealer > box label, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box label, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box label, infobar.warning > revealer > box, infobar.error:backdrop > revealer > box label, infobar.error:backdrop > revealer > box, infobar.error > revealer > box label, infobar.error > revealer > box { - color: #ffffff; } + infobar.info:backdrop > revealer > box, infobar.info > revealer > box, infobar.question:backdrop > revealer > box, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box, infobar.error:backdrop > revealer > box, infobar.error > revealer > box { + background-color: #f5e5c8; + border-bottom: 1px solid #dedede; } + infobar.info:backdrop > revealer > box label, infobar.info:backdrop > revealer > box, infobar.info > revealer > box label, infobar.info > revealer > box, infobar.question:backdrop > revealer > box label, infobar.question:backdrop > revealer > box, infobar.question > revealer > box label, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box label, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box label, infobar.warning > revealer > box, infobar.error:backdrop > revealer > box label, infobar.error:backdrop > revealer > box, infobar.error > revealer > box label, infobar.error > revealer > box { + color: #5c616c; } infobar.info:backdrop, infobar.question:backdrop, infobar.warning:backdrop, infobar.error:backdrop { text-shadow: none; } - infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { - background-color: #e6e6e6; } - infobar.info *:link, infobar.info button:link, - infobar.info button:visited, infobar.question *:link, infobar.question button:link, - infobar.question button:visited, infobar.warning *:link, infobar.warning button:link, - infobar.warning button:visited, infobar.error *:link, infobar.error button:link, - infobar.error button:visited { - color: #005af3; } - infobar.info:backdrop > revealer > box, infobar.info > revealer > box { - background-color: #2777ff; } - infobar.info button { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #005af3; - border-bottom-color: #0047c0; - background-image: linear-gradient(to top, #136aff 2px, #2777ff); - text-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); } - infobar.info button:hover { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #005af3; - border-bottom-color: #0047c0; - text-shadow: 0 -1px rgba(0, 0, 0, 0.4908235294); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4908235294); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to top, #2777ff, #2c7aff 1px); } - infobar.info button:active, infobar.info button:checked { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #005af3; - background-image: image(#0053df); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); - text-shadow: none; - -gtk-icon-shadow: none; } - infobar.info button:disabled { - border-color: #005af3; - background-image: image(#478bfe); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - infobar.info button:disabled label, infobar.info button:disabled { - color: #a3c5ff; } - infobar.info button:backdrop { - border-color: #2777ff; - background-image: image(#2777ff); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #005af3; } - infobar.info button:backdrop label, infobar.info button:backdrop { - color: #d4e4ff; } - infobar.info button:backdrop:disabled { - border-color: #478bfe; - background-image: image(#478bfe); - text-shadow: none; - -gtk-icon-shadow: none; + infobar.info button, infobar.question button, infobar.warning button, infobar.error button { + color: #5c616c; + outline-color: rgba(92, 97, 108, 0.3); + border-color: #d1d1d1; + border-bottom-color: #c2c2c2; + background-image: linear-gradient(to top, whitesmoke 2px, #ffffff); + text-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); + box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); } + infobar.info button:hover, infobar.question button:hover, infobar.warning button:hover, infobar.error button:hover { + color: #5c616c; + outline-color: rgba(92, 97, 108, 0.3); + border-color: #d1d1d1; + border-bottom-color: #c2c2c2; + text-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); + box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #ffffff, white 1px); } + infobar.info button:active, infobar.info button:checked, infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked, infobar.error button:active, infobar.error button:checked { + color: #5c616c; + outline-color: rgba(92, 97, 108, 0.3); + border-color: #d1d1d1; + background-image: image(#dbdbdb); box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #005af3; } - infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled { - color: #87b4fe; } - infobar.info button:backdrop label, infobar.info button:backdrop, infobar.info button label, infobar.info button { - color: #ffffff; } - infobar.question:backdrop > revealer > box, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box { - background-color: #fd7d00; } - infobar.question button, infobar.warning button { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #ca6400; - border-bottom-color: #974b00; - background-image: linear-gradient(to top, #e97300 2px, #fd7d00); - text-shadow: 0 -1px rgba(0, 0, 0, 0.6031372549); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6031372549); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } - infobar.question button:hover, infobar.warning button:hover { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #ca6400; - border-bottom-color: #974b00; - text-shadow: 0 -1px rgba(0, 0, 0, 0.5551372549); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5551372549); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to top, #fd7d00, #ff8003 1px); } - infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #ca6400; - background-image: image(#b65a00); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); - text-shadow: none; - -gtk-icon-shadow: none; } - infobar.question button:disabled, infobar.warning button:disabled { - border-color: #ca6400; - background-image: image(#fd9026); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - infobar.question button:disabled label, infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled { - color: #fec893; } - infobar.question button:backdrop, infobar.warning button:backdrop { - border-color: #fd7d00; - background-image: image(#fd7d00); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #ca6400; } - infobar.question button:backdrop label, infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop { - color: #ffe5cc; } - infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled { - border-color: #fd9026; - background-image: image(#fd9026); - text-shadow: none; - -gtk-icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #ca6400; } - infobar.question button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled label, infobar.warning button:backdrop:disabled { - color: #feb772; } - infobar.question button:backdrop label, infobar.question button:backdrop, infobar.question button label, infobar.question button, infobar.warning button:backdrop label, infobar.warning button:backdrop, infobar.warning button label, infobar.warning button { - color: #ffffff; } - infobar.error:backdrop > revealer > box, infobar.error > revealer > box { - background-color: #bf1717; } - infobar.error:backdrop > revealer > box button, infobar.error > revealer > box button { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #911212; - border-bottom-color: #640c0c; - background-image: linear-gradient(to top, #ad1515 2px, #bf1717); - text-shadow: 0 -1px rgba(0, 0, 0, 0.6643137255); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6643137255); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } - infobar.error:backdrop > revealer > box button:hover, infobar.error > revealer > box button:hover { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #911212; - border-bottom-color: #640c0c; - text-shadow: 0 -1px rgba(0, 0, 0, 0.6163137255); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6163137255); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); - background-image: linear-gradient(to top, #bf1717, #c41818 1px); } - infobar.error:backdrop > revealer > box button:active, infobar.error:backdrop > revealer > box button:checked, infobar.error > revealer > box button:active, infobar.error > revealer > box button:checked { - color: #ffffff; - outline-color: rgba(255, 255, 255, 0.3); - border-color: #911212; - background-image: image(#7f0f0f); - box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); text-shadow: none; -gtk-icon-shadow: none; } - infobar.error:backdrop > revealer > box button:disabled, infobar.error > revealer > box button:disabled { - border-color: #911212; - background-image: image(#c83939); + infobar.info button:disabled, infobar.question button:disabled, infobar.warning button:disabled, infobar.error button:disabled { + border-color: #d1d1d1; + background-image: image(#fdfdfd); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - infobar.error:backdrop > revealer > box button:disabled label, infobar.error:backdrop > revealer > box button:disabled, infobar.error > revealer > box button:disabled label, infobar.error > revealer > box button:disabled { - color: #e49c9c; } - infobar.error:backdrop > revealer > box button:backdrop, infobar.error > revealer > box button:backdrop { - border-color: #bf1717; - background-image: image(#bf1717); + infobar.info button:disabled label, infobar.info button:disabled, infobar.question button:disabled label, infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled, infobar.error button:disabled label, infobar.error button:disabled { + color: #aeb0b6; } + infobar.info button:backdrop, infobar.question button:backdrop, infobar.warning button:backdrop, infobar.error button:backdrop { + border-color: #dadada; + background-image: image(#ffffff); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #911212; } - infobar.error:backdrop > revealer > box button:backdrop label, infobar.error:backdrop > revealer > box button:backdrop, infobar.error > revealer > box button:backdrop label, infobar.error > revealer > box button:backdrop { - color: #f2d1d1; } - infobar.error:backdrop > revealer > box button:backdrop:disabled, infobar.error > revealer > box button:backdrop:disabled { - border-color: #c83939; - background-image: image(#c83939); + border-color: #e6e6e6; } + infobar.info button:backdrop label, infobar.info button:backdrop, infobar.question button:backdrop label, infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop, infobar.error button:backdrop label, infobar.error button:backdrop { + color: #aeb0b6; } + infobar.info button:backdrop:disabled, infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled, infobar.error button:backdrop:disabled { + border-color: #dadada; + background-image: image(#fdfdfd); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); - border-color: #911212; } - infobar.error:backdrop > revealer > box button:backdrop:disabled label, infobar.error:backdrop > revealer > box button:backdrop:disabled, infobar.error > revealer > box button:backdrop:disabled label, infobar.error > revealer > box button:backdrop:disabled { - color: #db7e7e; } - infobar.error:backdrop > revealer > box button:backdrop label, infobar.error:backdrop > revealer > box button:backdrop, infobar.error:backdrop > revealer > box button label, infobar.error:backdrop > revealer > box button, infobar.error > revealer > box button:backdrop label, infobar.error > revealer > box button:backdrop, infobar.error > revealer > box button label, infobar.error > revealer > box button { - color: #ffffff; } + border-color: #e6e6e6; } + infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled, infobar.question button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled label, infobar.warning button:backdrop:disabled, infobar.error button:backdrop:disabled label, infobar.error button:backdrop:disabled { + color: #d9d9d9; } + infobar.info button:backdrop label, infobar.info button:backdrop, infobar.info button label, infobar.info button, infobar.question button:backdrop label, infobar.question button:backdrop, infobar.question button label, infobar.question button, infobar.warning button:backdrop label, infobar.warning button:backdrop, infobar.warning button label, infobar.warning button, infobar.error button:backdrop label, infobar.error button:backdrop, infobar.error button label, infobar.error button { + color: #5c616c; } + infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { + background-color: #e6e6e6; } + infobar.info *:link, infobar.question *:link, infobar.warning *:link, infobar.error *:link { + color: #005af3; } /************ * Tooltips * @@ -4612,26 +4456,26 @@ colorchooser .popover.osd { decoration { border-radius: 8px 8px 0 0; border-width: 0px; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); + box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.23); margin: 10px; } decoration:backdrop { - box-shadow: 0 2px 8px 0 transparent, 0 0 0 3px rgba(0, 0, 0, 0.15); + box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18); transition: 200ms ease-out; } .maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; } .popup decoration { box-shadow: none; } .ssd decoration { - box-shadow: none; } + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23); } .csd.popup decoration { border-radius: 5px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } tooltip.csd decoration { border-radius: 5px; box-shadow: none; } messagedialog.csd decoration { border-radius: 8px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } .solid-csd decoration { margin: 0; padding: 4px; @@ -4690,31 +4534,31 @@ entry selection, modelbutton.flat:selected, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { color: #ffffff; } - row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, + label:disabled selection, row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, iconview text:disabled:selected:focus, textview text:disabled:selected:focus, .view text:disabled:selected, iconview text:disabled:selected, textview text:disabled:selected, iconview text selection:disabled:focus, .view text selection:disabled, iconview text selection:disabled, - textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, + textview text selection:disabled, flowbox flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected { color: #93bbff; } - row:selected label:backdrop, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, + label:backdrop selection, row:selected label:backdrop, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, iconview text:backdrop:selected:focus, textview text:backdrop:selected:focus, .view text:backdrop:selected, iconview text:backdrop:selected, textview text:backdrop:selected, iconview text selection:backdrop:focus, .view text selection:backdrop, iconview text selection:backdrop, - textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label:backdrop selection, spinbutton:not(.vertical) selection:backdrop, + textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, .menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected { color: #f7f7f7; } - row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, + label:backdrop selection:disabled, row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected, textview text:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled, - textview text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, label:disabled selection:backdrop, label:backdrop selection:disabled, spinbutton:not(.vertical) selection:backdrop:disabled, + textview text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, entry selection:backdrop:disabled, modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, row:backdrop:disabled:selected, calendar:backdrop:disabled:selected { color: #659dfd; } @@ -4809,6 +4653,8 @@ stackswitcher button.text-button.circular { popover.emoji-picker { padding-left: 0; padding-right: 0; } + popover.emoji-picker entry.search { + margin: 3px 5px 5px 5px; } button.emoji-section { border-color: transparent; @@ -4824,6 +4670,10 @@ button.emoji-section { box-shadow: none; text-shadow: none; outline-offset: -5px; } + button.emoji-section:first-child { + margin-left: 7px; } + button.emoji-section:last-child { + margin-right: 7px; } button.emoji-section:backdrop:not(:checked) { border-color: transparent; } button.emoji-section:hover { @@ -4840,10 +4690,10 @@ button.emoji-section { popover.emoji-picker .emoji { font-size: x-large; - padding: 6px; - border-radius: 6px; } + padding: 6px; } popover.emoji-picker .emoji :hover { - background: #2777ff; } + background: #2777ff; + border-radius: 6px; } popover.emoji-completion arrow { border: none; @@ -4855,6 +4705,290 @@ popover.emoji-completion contents row box { popover.emoji-completion .emoji:hover { background: white; } +* { + outline-color: alpha(currentColor,0.07); + outline-style: solid; + outline-offset: -2px; + outline-width: 2px; + -gtk-outline-radius: 6px; } + +.titlebar stackswitcher button:checked:active, .titlebar stackswitcher button:checked, +.titlebar button.toggle:active, +.titlebar button.toggle:checked, +headerbar stackswitcher button:checked:active, +headerbar stackswitcher button:checked, +headerbar button.toggle:active, +headerbar button.toggle:checked, +button:active, +button:checked { + background: image(#ededed); + box-shadow: inset 0 3px 3px -2px rgba(0, 0, 0, 0.07); } + +switch:hover slider, scale slider:active { + background-image: image(white); } + +/********** + * Switch * + **********/ +switch slider { + color: #5c616c; + outline-color: rgba(92, 97, 108, 0.3); + border-color: #c2c2c2; + text-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.7692307692); + background-image: linear-gradient(to bottom, white 20%, #ffffff 90%); + box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + border: 1px solid #bababa; + border-radius: 50%; + transition-property: background, border, box-shadow; } +switch:hover slider { + border-color: #2777ff; } +switch:checked slider { + border-color: #0051da; } +switch:backdrop slider { + border-color: #dadada; } +switch:backdrop:checked slider { + border-color: #2777ff; } + +/************ + * GtkScale * + ************/ +scale slider:active { + border-color: #2777ff; } + +/*************** + * Header bars * + ***************/ +.titlebar, +headerbar { + border-color: #2777ff; + background: #fafafa -gtk-scaled(url("assets/kali-headerbar-logo.png"), url("assets/kali-headerbar-logo@2.png")), linear-gradient(to top, whitesmoke, #fcfcfc); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); + background-repeat: no-repeat; + background-position: left; } + .titlebar:backdrop, + headerbar:backdrop { + background-image: -gtk-scaled(url("assets/kali-headerbar-logo.png"), url("assets/kali-headerbar-logo@2.png")); + background-repeat: no-repeat; + background-position: left; } + +/************** + * GtkInfoBar * + **************/ +infobar, infobar.info, infobar.question, infobar.warning, infobar.error { + border-style: none; + text-shadow: none; } + infobar:backdrop > revealer > box label, infobar:backdrop > revealer > box, infobar > revealer > box label, infobar > revealer > box, infobar.info:backdrop > revealer > box label, infobar.info:backdrop > revealer > box, infobar.info > revealer > box label, infobar.info > revealer > box, infobar.question:backdrop > revealer > box label, infobar.question:backdrop > revealer > box, infobar.question > revealer > box label, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box label, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box label, infobar.warning > revealer > box, infobar.error:backdrop > revealer > box label, infobar.error:backdrop > revealer > box, infobar.error > revealer > box label, infobar.error > revealer > box { + color: #ffffff; } + infobar:backdrop, infobar.info:backdrop, infobar.question:backdrop, infobar.warning:backdrop, infobar.error:backdrop { + text-shadow: none; } + infobar selection, infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { + background-color: #e6e6e6; } + infobar *:link, infobar.info *:link, infobar.question *:link, infobar.warning *:link, infobar.error *:link { + color: #005af3; } +infobar.info:backdrop > revealer > box, infobar.info > revealer > box { + background-color: #2777ff; } +infobar.info button { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #005af3; + border-bottom-color: #0047c0; + background-image: linear-gradient(to top, #136aff 2px, #2777ff); + text-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5388235294); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); } + infobar.info button:hover { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #005af3; + border-bottom-color: #0047c0; + text-shadow: 0 -1px rgba(0, 0, 0, 0.4908235294); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4908235294); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #2777ff, #2c7aff 1px); } + infobar.info button:active, infobar.info button:checked { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #005af3; + background-image: image(#0053df); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + infobar.info button:disabled { + border-color: #005af3; + background-image: image(#478bfe); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + infobar.info button:disabled label, infobar.info button:disabled { + color: #a3c5ff; } + infobar.info button:backdrop { + border-color: #2777ff; + background-image: image(#2777ff); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #005af3; } + infobar.info button:backdrop label, infobar.info button:backdrop { + color: #d4e4ff; } + infobar.info button:backdrop:disabled { + border-color: #478bfe; + background-image: image(#478bfe); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #005af3; } + infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled { + color: #87b4fe; } + infobar.info button:backdrop label, infobar.info button:backdrop, infobar.info button label, infobar.info button { + color: #ffffff; } +infobar.question:backdrop > revealer > box, infobar.question > revealer > box, infobar.warning:backdrop > revealer > box, infobar.warning > revealer > box { + background-color: #fd7d00; } +infobar.question button, infobar.warning button { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #ca6400; + border-bottom-color: #974b00; + background-image: linear-gradient(to top, #e97300 2px, #fd7d00); + text-shadow: 0 -1px rgba(0, 0, 0, 0.6031372549); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6031372549); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } + infobar.question button:hover, infobar.warning button:hover { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #ca6400; + border-bottom-color: #974b00; + text-shadow: 0 -1px rgba(0, 0, 0, 0.5551372549); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.5551372549); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #fd7d00, #ff8003 1px); } + infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #ca6400; + background-image: image(#b65a00); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + infobar.question button:disabled, infobar.warning button:disabled { + border-color: #ca6400; + background-image: image(#fd9026); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + infobar.question button:disabled label, infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled { + color: #fec893; } + infobar.question button:backdrop, infobar.warning button:backdrop { + border-color: #fd7d00; + background-image: image(#fd7d00); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #ca6400; } + infobar.question button:backdrop label, infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop { + color: #ffe5cc; } + infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled { + border-color: #fd9026; + background-image: image(#fd9026); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #ca6400; } + infobar.question button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning button:backdrop:disabled label, infobar.warning button:backdrop:disabled { + color: #feb772; } + infobar.question button:backdrop label, infobar.question button:backdrop, infobar.question button label, infobar.question button, infobar.warning button:backdrop label, infobar.warning button:backdrop, infobar.warning button label, infobar.warning button { + color: #ffffff; } +infobar.error:backdrop > revealer > box, infobar.error > revealer > box { + background-color: #bf1717; } + infobar.error:backdrop > revealer > box button, infobar.error > revealer > box button { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #911212; + border-bottom-color: #640c0c; + background-image: linear-gradient(to top, #ad1515 2px, #bf1717); + text-shadow: 0 -1px rgba(0, 0, 0, 0.6643137255); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6643137255); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } + infobar.error:backdrop > revealer > box button:hover, infobar.error > revealer > box button:hover { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #911212; + border-bottom-color: #640c0c; + text-shadow: 0 -1px rgba(0, 0, 0, 0.6163137255); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.6163137255); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); + background-image: linear-gradient(to top, #bf1717, #c41818 1px); } + infobar.error:backdrop > revealer > box button:active, infobar.error:backdrop > revealer > box button:checked, infobar.error > revealer > box button:active, infobar.error > revealer > box button:checked { + color: #ffffff; + outline-color: rgba(255, 255, 255, 0.3); + border-color: #911212; + background-image: image(#7f0f0f); + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + -gtk-icon-shadow: none; } + infobar.error:backdrop > revealer > box button:disabled, infobar.error > revealer > box button:disabled { + border-color: #911212; + background-image: image(#c83939); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + infobar.error:backdrop > revealer > box button:disabled label, infobar.error:backdrop > revealer > box button:disabled, infobar.error > revealer > box button:disabled label, infobar.error > revealer > box button:disabled { + color: #e49c9c; } + infobar.error:backdrop > revealer > box button:backdrop, infobar.error > revealer > box button:backdrop { + border-color: #bf1717; + background-image: image(#bf1717); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #911212; } + infobar.error:backdrop > revealer > box button:backdrop label, infobar.error:backdrop > revealer > box button:backdrop, infobar.error > revealer > box button:backdrop label, infobar.error > revealer > box button:backdrop { + color: #f2d1d1; } + infobar.error:backdrop > revealer > box button:backdrop:disabled, infobar.error > revealer > box button:backdrop:disabled { + border-color: #c83939; + background-image: image(#c83939); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #911212; } + infobar.error:backdrop > revealer > box button:backdrop:disabled label, infobar.error:backdrop > revealer > box button:backdrop:disabled, infobar.error > revealer > box button:backdrop:disabled label, infobar.error > revealer > box button:backdrop:disabled { + color: #db7e7e; } + infobar.error:backdrop > revealer > box button:backdrop label, infobar.error:backdrop > revealer > box button:backdrop, infobar.error:backdrop > revealer > box button label, infobar.error:backdrop > revealer > box button, infobar.error > revealer > box button:backdrop label, infobar.error > revealer > box button:backdrop, infobar.error > revealer > box button label, infobar.error > revealer > box button { + color: #ffffff; } + +/********************* + * App Notifications * + *********************/ +.app-notification, +.app-notification.frame { + padding: 5px; + margin: 20px; + border-radius: 5px; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); + background-image: none; } + .app-notification:backdrop, + .app-notification.frame:backdrop { + box-shadow: none; } + +/*********** + * Dialogs * + ***********/ +messagedialog .titlebar:backdrop { + background-image: none; } + +/********************** + * Window Decorations * + *********************/ +decoration { + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } + decoration:backdrop { + box-shadow: 0 2px 8px 0 transparent, 0 0 0 3px rgba(0, 0, 0, 0.15); } + .ssd decoration { + box-shadow: none; } + .csd.popup decoration { + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } + messagedialog.csd decoration { + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } + /* Nautilus */ @define-color disk_space_unknown #383c4a; @define-color disk_space_used #2777ff; diff --git a/src/themes/Kali/sass/gtk-dark.scss b/src/themes/Kali/sass/gtk-dark.scss index 896320b5..59881c34 100644 --- a/src/themes/Kali/sass/gtk-dark.scss +++ b/src/themes/Kali/sass/gtk-dark.scss @@ -1,7 +1,14 @@ +// General guidelines: +// - very unlikely you want to edit something else than _common.scss +// - keep the number of defined colors to a minimum, use the color blending functions if +// you need a subtle shade +// - if you need to inverse a color function use the @if directive to match for dark $variant + $variant: 'dark'; @import 'gtk-sass/_colors'; -@import 'gtk-sass/_drawing'; -@import 'gtk-sass/_common'; +@import 'gtk-sass/upstream/_drawing'; +@import 'gtk-sass/upstream/_common'; +@import 'gtk-sass/_common-tweaks'; @import 'gtk-sass/_applications'; -@import 'gtk-sass/_colors-public'; +@import 'gtk-sass/upstream/_colors-public'; diff --git a/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss b/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss new file mode 100644 index 00000000..5931c025 --- /dev/null +++ b/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss @@ -0,0 +1,198 @@ +* { + outline-color: gtkalpha(currentColor, 0.07); + outline-style: solid; + outline-offset: -2px; + outline-width: 2px; + -gtk-outline-radius: 6px; +} + +%button_active, +button:active, +button:checked, { + background: if($variant == 'light', image(darken($bg_color, 7%)), image(darken($bg_color, 14%))); + box-shadow: inset 0 3px 3px -2px transparentize($shadow_color, 0.03); +} + +%slider_active { + background-image: if($variant == 'light', image(lighten($bg_color, 14%)), image(darken($bg_color, 9%))); +} + +/********** + * Switch * + **********/ +switch { + $_slider_border_color: darken($alt_borders_color, 3%); + + slider { + @include button(normal-alt, $edge: $shadow_color); + + border: 1px solid $_slider_border_color; + border-radius: 50%; + transition-property: background, border, box-shadow; + } + + &:hover slider { + @extend %slider_active; + border-color: $suggested_bg_color; + } + + &:checked slider { + border-color: if($variant=='light', $suggested_border_color, $_slider_border_color); + } + + &:backdrop { + slider { border-color: $backdrop_borders_color; } + + &:checked slider { + border-color: if($variant=='light', $suggested_bg_color, $backdrop_borders_color); + } + } +} + +/************ + * GtkScale * + ************/ +scale slider:active { + @extend %slider_active; + + border-color: $suggested_bg_color; +} + +/*************** + * Header bars * + ***************/ +.titlebar, +headerbar { + border-color: $selected_bg_color; + + $_scale_asset: 'assets/kali-headerbar-logo#{$asset_suffix}'; + @include headerbar_fill(darken($bg_color, if($variant == 'light', 2%, 10%)), + $ov: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'))); + background-repeat: no-repeat; + background-position: left; + + &:backdrop { + background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')); + background-repeat: no-repeat; + background-position: left; + } + + stackswitcher button:checked, + button.toggle { + &:active, &:checked { @extend %button_active; } + } +} + +/************** + * GtkInfoBar * + **************/ +infobar { + @mixin _infobar_button($bg) { + button { + // FIXME: extend selection mode buttons + @include button(normal, $bg, $selected_fg_color, none); + + &:hover { @include button(hover, $bg, $selected_fg_color, none); } + + &:active, + &:checked { @include button(active, $bg, $selected_fg_color, none); } + + &:disabled { @include button(insensitive,$bg,$selected_fg_color,none); } + + &:backdrop { + @include button(backdrop, $bg, $selected_fg_color, none); + border-color: _border_color($bg); + + &:disabled { + @include button(backdrop-insensitive, $bg, + $selected_fg_color, none); + border-color: _border_color($bg); + } + } + &:backdrop, & { + label, & { color: $selected_fg_color; } + } + } + } + + &, + &.info, + &.question, + &.warning, + &.error { + + border-style: none; + text-shadow: none; + + &:backdrop > revealer > box, & > revealer > box { + label, & { color: $selected_fg_color; } + } + + &:backdrop { text-shadow: none; } + + selection { background-color: darken($bg_color, 10%); } + + *:link { color: $link_color; } + } + + &.info { + &:backdrop > revealer > box, & > revealer > box { + background-color: $selected_bg_color; + } + + @include _infobar_button($selected_bg_color); + } + + &.question, &.warning { + &:backdrop > revealer > box, & > revealer > box { + background-color: $warning_color; + } + + @include _infobar_button($warning_color); + } + + &.error { + &:backdrop > revealer > box, & > revealer > box { + background-color: $error_color; + + @include _infobar_button($error_color); + } + } +} + +/********************* + * App Notifications * + *********************/ +.app-notification, +.app-notification.frame { + padding: 5px; + margin: 20px; + border-radius: 5px; + box-shadow: 0 2px 8px 0 transparentize(black, .6); + background-image: none; + + &:backdrop { box-shadow: none; } +} + +/*********** + * Dialogs * + ***********/ +messagedialog .titlebar:backdrop { background-image: none; } + +/********************** + * Window Decorations * + *********************/ +decoration { + box-shadow: 0 2px 8px 0 transparentize(black, 0.6); + + &:backdrop { + box-shadow: 0 2px 8px 0 transparent, + 0 0 0 3px if($variant == 'light', transparentize(black, .85), transparentize(black, .75)); + } + + .ssd & { box-shadow: none; } + + .csd.popup & { box-shadow: 0 1px 4px transparentize(black, 0.8); } + + messagedialog.csd & { box-shadow: 0 1px 4px transparentize(black, 0.8); } +} diff --git a/src/themes/Kali/sass/gtk-sass/_colors-public.scss b/src/themes/Kali/sass/gtk-sass/upstream/_colors-public.scss similarity index 100% rename from src/themes/Kali/sass/gtk-sass/_colors-public.scss rename to src/themes/Kali/sass/gtk-sass/upstream/_colors-public.scss diff --git a/src/themes/Kali/sass/gtk-sass/upstream/_colors.scss b/src/themes/Kali/sass/gtk-sass/upstream/_colors.scss new file mode 100644 index 00000000..e4480a06 --- /dev/null +++ b/src/themes/Kali/sass/gtk-sass/upstream/_colors.scss @@ -0,0 +1,77 @@ +// When color definition differs for dark and light variant +// it gets @if ed depending on $variant + + +$base_color: if($variant == 'light', #ffffff, lighten(desaturate(#241f31, 100%), 2%)); +$text_color: if($variant == 'light', black, white); +$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%)); +$fg_color: if($variant == 'light', #2e3436, #eeeeec); + +$selected_fg_color: #ffffff; +$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 20%)); +$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); +$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%)); +$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%)); +$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93)); +$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%)); +$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%)); +$top_hilight: $borders_edge; +$dark_fill: mix($borders_color, $bg_color, 50%); +$headerbar_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%)); +$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%)); +$popover_bg_color: $bg_color; +$popover_hover_color: lighten($bg_color, 5%); + +$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%)); +$scrollbar_slider_color: mix($fg_color, $bg_color, 60%); +$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%); +$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%)); + +$warning_color: #f57900; +$error_color: #cc0000; +$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%)); +$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%)); + +$osd_fg_color: #eeeeec; +$osd_text_color: white; +$osd_bg_color: if($variant == 'light', transparentize(darken(desaturate(#3d3846, 100%), 4%),0.1), transparentize(darken(desaturate(#3d3846, 100%), 10%),0.1)); +$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); +$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%); +$osd_borders_color: transparentize(black, 0.3); + +$sidebar_bg_color: mix($bg_color, $base_color, 50%); +$base_hover_color: transparentize($fg_color, 0.95); + +$tooltip_borders_color: transparentize(white, 0.9); +$shadow_color: transparentize(black, 0.9); + +$drop_target_color: #4e9a06; + +//insensitive state derived colors +$insensitive_fg_color: mix($fg_color, $bg_color, 50%); +$insensitive_bg_color: mix($bg_color, $base_color, 60%); +$insensitive_borders_color: $borders_color; + +//colors for the backdrop state, derived from the main colors. +$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%)); +$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%); +$backdrop_bg_color: $bg_color; +$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%); +$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%)); +$backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color); +$backdrop_borders_color: mix($borders_color, $bg_color, 80%); +$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); +$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%); + +$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); +$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); + +$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%)); + +//special cased widget colors +$suggested_bg_color: $selected_bg_color; +$suggested_border_color: $selected_borders_color; +$progress_bg_color: $selected_bg_color; +$progress_border_color: $selected_borders_color; +$checkradio_bg_color: $selected_bg_color; +$checkradio_fg_color: $selected_fg_color; diff --git a/src/themes/Kali/sass/gtk-sass/_common.scss b/src/themes/Kali/sass/gtk-sass/upstream/_common.scss similarity index 94% rename from src/themes/Kali/sass/gtk-sass/_common.scss rename to src/themes/Kali/sass/gtk-sass/upstream/_common.scss index f2dbdf59..d5349316 100644 --- a/src/themes/Kali/sass/gtk-sass/_common.scss +++ b/src/themes/Kali/sass/gtk-sass/upstream/_common.scss @@ -46,11 +46,11 @@ $_switch_margin: if($_sizevariant=='default', 10px, 7px); // to the adwaita engine: using real CSS properties is faster, // and we don't use any outlines for now. - outline-color: gtkalpha(currentColor, 0.07); - outline-style: solid; - outline-offset: -2px; - outline-width: 2px; - -gtk-outline-radius: 6px; + outline-color: gtkalpha(currentColor, 0.3); + outline-style: dashed; + outline-offset: -3px; + outline-width: 1px; + -gtk-outline-radius: $button-radius - 2; -gtk-secondary-caret-color: $selected_bg_color } @@ -168,7 +168,7 @@ flowbox { background-color: if($variant=='light', transparent, black); border-radius: 0; padding: 0; - + &:backdrop { background-color: if($variant=='light', transparent, darken($backdrop_base_color,5%)); } &:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); } &:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); } @@ -196,7 +196,7 @@ label { &:disabled { color: $insensitive_fg_color; - selection { @extend %selected_items:disabled; } + selection { @extend %selected_items_disabled; } &:backdrop { color: $backdrop_insensitive_color; } } @@ -204,7 +204,7 @@ label { &:backdrop { color: $backdrop_fg_color; - selection { @extend %selected_items:backdrop; } + selection { @extend %selected_items_backdrop; } } } @@ -543,6 +543,7 @@ button { @include button(normal); + @at-root %button_basic_flat, &.flat { @include button(undecorated); // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set @@ -620,6 +621,7 @@ button { } } + @at-root %button_basic_drop_active, &:drop(active) { color: $drop_target_color; border-color: $drop_target_color; @@ -961,11 +963,11 @@ toolbar.inline-toolbar toolbutton, toolbar.inline-toolbar toolbutton:backdrop { > button.flat { @extend %linked_middle; } - &:first-child > button.flat { @extend %linked:first-child; } + &:first-child > button.flat { @extend %linked_left; } - &:last-child > button.flat { @extend %linked:last-child; } + &:last-child > button.flat { @extend %linked_right; } - &:only-child > button.flat { @extend %linked:only-child; } + &:only-child > button.flat { @extend %linked_only_child; } } %linked_middle { @@ -989,6 +991,11 @@ toolbar.inline-toolbar toolbutton:backdrop { border-right-style: solid; } +%linked_only_child { + border-radius: $button_radius; + border-style: solid; +} + // .linked assumes Box, which reverses nodes in RTL, so 1st child is always left %linked { @extend %linked_middle; @@ -996,10 +1003,7 @@ toolbar.inline-toolbar toolbutton:backdrop { &:first-child { @extend %linked_left; } &:last-child { @extend %linked_right; } - &:only-child { - border-radius: $button_radius; - border-style: solid; - } + &:only-child { @extend %linked_only_child; } } // Other widgets use widget child order, so 1st/last child are at text start/end @@ -1016,10 +1020,7 @@ toolbar.inline-toolbar toolbutton:backdrop { &:last-child { @extend %linked_left; } } - &:only-child { - border-radius: $button_radius; - border-style: solid; - } + &:only-child { @extend %linked_only_child; } } %linked_vertical_middle { @@ -1027,24 +1028,30 @@ toolbar.inline-toolbar toolbutton:backdrop { border-radius: 0; } +%linked_vertical_top { + border-top-left-radius: $button_radius; + border-top-right-radius: $button_radius; +} + +%linked_vertical_bottom { + border-bottom-left-radius: $button_radius; + border-bottom-right-radius: $button_radius; + border-style: solid; +} + +%linked_vertical_only_child { + border-radius: $button_radius; + border-style: solid; +} + %linked_vertical{ @extend %linked_vertical_middle; - &:first-child { - border-top-left-radius: $button_radius; - border-top-right-radius: $button_radius; - } + &:first-child { @extend %linked_vertical_top; } - &:last-child { - border-bottom-left-radius: $button_radius; - border-bottom-right-radius: $button_radius; - border-style: solid; - } + &:last-child { @extend %linked_vertical_bottom; } - &:only-child { - border-radius: $button_radius; - border-style: solid; - } + &:only-child { @extend %linked_vertical_only_child; } } %undecorated_button { @@ -1158,7 +1165,7 @@ button:link, button:visited { @extend %undecorated_button; - @extend *:link; + @extend %link; text-shadow: none; @@ -1395,15 +1402,15 @@ combobox { &.linked { button:nth-child(2) { - &:dir(ltr) { @extend %linked:last-child; } - &:dir(rtl) { @extend %linked:first-child; } + &:dir(ltr) { @extend %linked_right; } + &:dir(rtl) { @extend %linked_left; } } } &:drop(active) { // FIXME: untested box-shadow: none; - button.combo { @extend %button_basic:drop(active); } + button.combo { @extend %button_basic_drop_active; } } } @@ -1416,14 +1423,14 @@ combobox { &:dir(rtl) { @extend %linked_middle; } // specificity bump } -.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; } -.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; } -.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; } +.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked_left; } +.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked_right; } +.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked_only_child; } .linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; } -.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;} -.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; } -.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; } +.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical_top;} +.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical_bottom; } +.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical_only_child; } /************ @@ -1522,21 +1529,15 @@ headerbar { min-height: $_headerbar_height; border-width: 0 0 1px; border-style: solid; - border-color: $selected_bg_color; + border-color: $alt_borders_color; border-radius: 0; - $_scale_asset: 'assets/kali-headerbar-logo#{$asset_suffix}'; - @include headerbar_fill(darken($bg_color, if($variant == 'light', 2%, 10%)), - $ov: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'))); - background-repeat: no-repeat; - background-position: left; + @include headerbar_fill(darken($bg_color, 10%)); &:backdrop { border-color: $backdrop_borders_color; background-color: $bg_color; - background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')); - background-repeat: no-repeat; - background-position: left; + background-image: none; box-shadow: inset 0 1px $top_hilight; transition: $backdrop_transition; @@ -1560,7 +1561,7 @@ headerbar { stackswitcher button:checked, button.toggle:checked { - background: if($variant == 'light', image(darken($bg_color, 7%)), image(darken($bg_color, 14%))); + background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%))); border-color: darken($borders_color, 3%); border-top-color: darken($borders_color, 8%); &:backdrop { @@ -1582,14 +1583,14 @@ headerbar { background-color: $suggested_bg_color; background-image: none; box-shadow: inset 0 1px mix($top_hilight, $suggested_bg_color, 60%); - - label { + + label { text-shadow: none; - color: $selected_fg_color; + color: $selected_fg_color; } } - .subtitle:link { @extend *:link:selected; } + .subtitle:link { @extend %link_selected; } button { @include button(normal, $suggested_bg_color, $selected_fg_color); @@ -1721,9 +1722,9 @@ headerbar { padding: 0; } } + - - + separator.titlebutton { opacity: 0; } /* hide the close button separator */ .solid-csd & { @@ -2133,7 +2134,7 @@ menubar, // remove padding and rounding from menubar submenus menu { - .csd &, & { + &:dir(rtl), &:dir(ltr) { // specificity bump border-radius: 0; padding: 0; } @@ -2435,7 +2436,7 @@ notebook { > tabs > arrow { @extend %button_basic; - @extend %button_basic.flat; + @extend %button_basic_flat; min-height: 16px; min-width: 16px; @@ -2810,30 +2811,35 @@ switch { } } - $_slider_border_color: darken($alt_borders_color, 3%); slider { margin: -1px; min-width: 24px; min-height: 24px; - @include button(normal-alt, $edge: $shadow_color); - - border: 1px solid $_slider_border_color; - border-radius: 100%; + border: 1px solid; + border-radius: 50%; transition: $button_transition; - transition-property: background, border, box-shadow; -gtk-outline-radius: 20px; - } + @if $variant == 'light' { + @include button(normal-alt, $edge: $shadow_color); + } + @else { + @include button(normal-alt, $c: lighten($bg_color,6%), $edge: $shadow_color); + } + } + image { color: transparent; } /* only show i / o for the accessible theme */ &:hover slider { - @include button(active-alt, $edge: $shadow_color); - border-color: $suggested_bg_color; + @if $variant == 'light' { + @include button(hover-alt, $edge: $shadow_color); + } + @else { + @include button(hover-alt, $c: lighten($bg_color,6%), $edge: $shadow_color); + } } - &:checked slider { - border-color: if($variant=='light', $suggested_border_color, $_slider_border_color); - } + &:checked slider { border: 1px solid $suggested_border_color; } &:disabled slider { @include button(insensitive); } @@ -2842,12 +2848,9 @@ switch { transition: $backdrop_transition; @include button(backdrop); - border-color: $backdrop_borders_color; } - &:checked slider { - border-color: if($variant=='light', $suggested_bg_color, $backdrop_borders_color); - } + &:checked slider { border-color: if($variant == 'light', $suggested_bg_color, $suggested_border_color); } &:disabled slider { @include button(backdrop-insensitive); } } @@ -2936,20 +2939,42 @@ radio { border: 1px solid; -gtk-icon-source: none; - @include button(normal-alt, $edge: $shadow_color); - &:hover { @include button(hover-alt, $c:$checkradio_bg_color, $tc:$checkradio_fg_color, $edge: $shadow_color); } - &:hover:not(:checked) { @include button(hover-alt, $edge: $shadow_color); } - &:active { @include button(active, $c:$checkradio_bg_color, $tc:$checkradio_fg_color); } - &:checked { @include button(normal-alt, $c:$checkradio_bg_color, $tc:$checkradio_fg_color, $edge: $shadow_color); } - &:disabled { @include button(insensitive); } - &:backdrop { - @include button(backdrop); + & { + // for unchecked + $_c: if($variant=='light', white, $bg_color); - transition: $backdrop_transition; - - &:disabled { @include button(backdrop-insensitive); } + @each $state, $t in ("", "normal"), + (":hover", "hover"), + (":active", "active"), + (":disabled", "insensitive"), + (":backdrop", "backdrop"), + (":backdrop:disabled", 'backdrop-insensitive') { + &#{$state} { + @include check($t, $_c); + } + } } + & { + // for checked + @each $t in (':checked'), (':indeterminate') { + &#{$t} { + @each $state, $t in ("", "normal"), + (":hover", "hover"), + (":active", "active"), + (":disabled", "insensitive"), + (":backdrop", "backdrop"), + (":backdrop:disabled", 'backdrop-insensitive') { + &#{$state} { + @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true); + } + } + } + } + } + + &:backdrop { transition: $backdrop_transition; } + @if $variant == 'light' { // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background // color, hence we need special casing. @@ -2968,15 +2993,17 @@ radio { menu menuitem & { margin: 0; // this is a workaround for a menu check/radio size allocation issue - &, &:hover, &:disabled { //FIXME use button reset mixin - min-height: 14px; - min-width: 14px; - background-image: none; - background-color: transparent; - box-shadow: none; - -gtk-icon-shadow: none; - color: inherit; - border-color: currentColor; + &, &:checked, &:indeterminate { + &, &:hover, &:disabled { //FIXME use button reset mixin + min-height: 14px; + min-width: 14px; + background-image: none; + background-color: transparent; + box-shadow: none; + -gtk-icon-shadow: none; + color: inherit; + border-color: currentColor; + } } } } @@ -3035,15 +3062,7 @@ treeview.view radio { @if $variant == 'light' { border-color: $selected_borders_color; } } - - &:disabled { - color: $insensitive_fg_color; - - &:backdrop { color: $backdrop_insensitive_color; } - } } - - &:backdrop { &:selected, & { color: $backdrop_fg_color; }} } treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround @@ -3203,11 +3222,7 @@ scale { &:hover { @include button(hover-alt, $edge: $shadow_color); } - &:active { - @include button(active-alt, $edge: $shadow_color); - - border-color: $suggested_bg_color; - } + &:active { border-color: $progress_border_color; } &:disabled { @include button(insensitive); } @@ -3807,14 +3822,15 @@ row { .app-notification.frame { @extend %osd; - padding: 5px; - margin: 20px; - border-radius: 5px; + padding: 10px; + border-radius: 0 0 5px 5px; background-color: $osd_bg_color; - box-shadow: 0 2px 8px 0 transparentize(black, .6); + background-image: linear-gradient(to bottom, transparentize(black, 0.8), + transparent 2px); + background-clip: padding-box; &:backdrop { - box-shadow: none; + background-image: none; transition: $backdrop_transition; } @@ -3900,8 +3916,6 @@ messagedialog { // Message Dialog styling border-style: none; border-top-left-radius: 7px; border-top-right-radius: 7px; - - &:backdrop { background-image: none; } } &.csd { // rounded bottom border styling for csd version @@ -4029,7 +4043,7 @@ separator.sidebar { $_placesidebar_icons_opacity: 0.7; row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sidebar icons - // see bug #786613 for details + // see bug #786613 for details // on this oddity placessidebar { @@ -4067,7 +4081,7 @@ placessidebar { } @at-root button.sidebar-button { - @extend %button_basic.flat; + @extend %button_basic_flat; @extend %button_selected.flat; @@ -4204,33 +4218,6 @@ paned { * GtkInfoBar * **************/ infobar { - @mixin _infobar_button($bg) { - button { - // FIXME: extend selection mode buttons - @include button(normal, $bg, $selected_fg_color, none); - - &:hover { @include button(hover, $bg, $selected_fg_color, none); } - - &:active, - &:checked { @include button(active, $bg, $selected_fg_color, none); } - - &:disabled { @include button(insensitive,$bg,$selected_fg_color,none); } - - &:backdrop { - @include button(backdrop, $bg, $selected_fg_color, none); - border-color: _border_color($bg); - - &:disabled { - @include button(backdrop-insensitive, $bg, - $selected_fg_color, none); - border-color: _border_color($bg); - } - } - &:backdrop, & { - label, & { color: $selected_fg_color; } - } - } - } border-style: none; &.info, @@ -4238,40 +4225,46 @@ infobar { &.warning, &.error { &:backdrop > revealer > box, & > revealer > box { - label, & { color: $selected_fg_color; } + label, & { color: $fg_color; } + background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 45%), 30%), + desaturate(darken(invert($selected_bg_color),40%), 70%)); + border-bottom: 1px solid lighten($borders_color, 5%); } + text-shadow: none; &:backdrop { text-shadow: none; } + button { + // FIXME: extend selection mode buttons + @include button(normal, $bg_color, $fg_color, none); + + &:hover { @include button(hover, $bg_color, $fg_color, none); } + + &:active, + &:checked { @include button(active, $bg_color, $fg_color, none); } + + &:disabled { @include button(insensitive,$bg_color,$fg_color,none); } + + &:backdrop { + @include button(backdrop, $bg_color, $fg_color, none); + border-color: _border_color($bg_color); + + &:disabled { + @include button(backdrop-insensitive, $bg_color, + $fg_color, none); + border-color: _border_color($bg_color); + } + } + &:backdrop, & { + label, & { color: $fg_color; } + } + } + selection { background-color: darken($bg_color, 10%); } *:link { color: $link_color; } } - - &.info { - &:backdrop > revealer > box, & > revealer > box { - background-color: $selected_bg_color; - } - - @include _infobar_button($selected_bg_color); - } - - &.question, &.warning { - &:backdrop > revealer > box, & > revealer > box { - background-color: $warning_color; - } - - @include _infobar_button($warning_color); - } - - &.error { - &:backdrop > revealer > box, & > revealer > box { - background-color: $error_color; - - @include _infobar_button($error_color); - } - } } @@ -4495,9 +4488,13 @@ decoration { // lamefun trick to get rounded borders regardless of CSD use border-width: 0px; + // this needs to be transparent + // see bug #722563 + $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1)); $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1)); - box-shadow: 0 2px 8px 0 transparentize(black, 0.6); + box-shadow: 0 3px 9px 1px transparentize(black, 0.5), + 0 0 0 1px $_wm_border; //doing borders with box-shadow // FIXME rationalize shadows @@ -4509,8 +4506,9 @@ decoration { // change when we go to backdrop, to prevent jumping windows. // The biggest shadow should be in the same order then in the active state // or the jumping will happen during the transition. - box-shadow: 0 2px 8px 0 transparent, - 0 0 0 3px if($variant == 'light', transparentize(black, .85), transparentize(black, .75)); + box-shadow: 0 3px 9px 1px transparent, + 0 2px 6px 2px transparentize(black, 0.8), + 0 0 0 1px $_wm_border_backdrop; transition: $backdrop_transition; } @@ -4525,11 +4523,12 @@ decoration { .popup & { box-shadow: none; } // server-side decorations as used by mutter - .ssd & { box-shadow: none; } //just doing borders, wm draws actual shadows + .ssd & { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows .csd.popup & { border-radius: $menu_radius; - box-shadow: 0 1px 4px transparentize(black, 0.8); + box-shadow: 0 1px 2px transparentize(black, 0.8), + 0 0 0 1px transparentize($_wm_border, 0.1); } tooltip.csd & { @@ -4539,7 +4538,8 @@ decoration { messagedialog.csd & { border-radius: $window_radius; - box-shadow: 0 1px 4px transparentize(black, 0.8); + box-shadow: 0 1px 2px transparentize(black, 0.8), + 0 0 0 1px transparentize($_wm_border, 0.1); } .solid-csd & { @@ -4558,7 +4558,7 @@ decoration { button.titlebutton { @extend %button_basic; - @extend %button_basic.flat; + @extend %button_basic_flat; @include _button_text_shadow; @@ -4588,7 +4588,6 @@ headerbar.selection-mode button.titlebutton, &:backdrop { -gtk-icon-shadow: none; } } - // catch all extend :) %selected_items { @@ -4597,8 +4596,10 @@ headerbar.selection-mode button.titlebutton, @at-root %nobg_selected_items, & { color: $selected_fg_color; + @at-root %selected_items_disabled, &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); } + @at-root %selected_items_backdrop, &:backdrop { color: $backdrop_selected_fg_color; @@ -4711,7 +4712,12 @@ stackswitcher button.text-button.circular { // FIXME aggregate with buttons * Emoji * ********/ -popover.emoji-picker { padding-left: 0; padding-right: 0; } +popover.emoji-picker { + padding-left: 0; + padding-right: 0; + + entry.search { margin: 3px 5px 5px 5px; } +} button.emoji-section { border-color: transparent; @@ -4731,8 +4737,11 @@ button.emoji-section { outline-offset: -5px; + &:first-child { margin-left: 7px; } + &:last-child { margin-right: 7px; } + &:backdrop:not(:checked) { border-color: transparent; } - &:hover { border-color: $borders_color; } + &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); } &:checked { border-color: $selected_bg_color; } label { @@ -4748,10 +4757,10 @@ button.emoji-section { popover.emoji-picker .emoji { font-size: x-large; padding: 6px; - border-radius: 6px; :hover { background: $selected_bg_color; + border-radius: 6px; } } diff --git a/src/themes/Kali/sass/gtk-sass/upstream/_common.scss.patch b/src/themes/Kali/sass/gtk-sass/upstream/_common.scss.patch new file mode 100644 index 00000000..30fe8b26 --- /dev/null +++ b/src/themes/Kali/sass/gtk-sass/upstream/_common.scss.patch @@ -0,0 +1,4 @@ +15c15 +< $_sizevariant: 'default'; //compact otherwise +--- +> $_sizevariant: 'compact'; //compact otherwise diff --git a/src/themes/Kali/sass/gtk-sass/_drawing.scss b/src/themes/Kali/sass/gtk-sass/upstream/_drawing.scss similarity index 92% rename from src/themes/Kali/sass/gtk-sass/_drawing.scss rename to src/themes/Kali/sass/gtk-sass/upstream/_drawing.scss index 1a043ced..5d57fd04 100644 --- a/src/themes/Kali/sass/gtk-sass/_drawing.scss +++ b/src/themes/Kali/sass/gtk-sass/upstream/_drawing.scss @@ -224,21 +224,6 @@ background-image: $button_fill; } - @else if $t==active { - // - // pushed button - // - color: $tc; - outline-color: transparentize($tc, 0.7); - border-color: if($c != $bg_color, _border_color($c), $borders_color); - $button_fill: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%))) !global; - background-image: $button_fill; - @include _shadows(inset 0 3px 3px -2px transparentize($shadow_color, 0.03), $_button_edge); - - text-shadow: none; - -gtk-icon-shadow: none; - } - @if $t==normal-alt { // // normal button alternative look @@ -279,24 +264,19 @@ background-image: $button_fill; } - @else if $t==active-alt { + @else if $t==active { // // pushed button // color: $tc; outline-color: transparentize($tc, 0.7); border-color: if($c != $bg_color, _border_color($c), $borders_color); - $button_fill: if($variant == 'light', image(lighten($c, 14%)), image(darken($c, 9%))) !global; + $button_fill: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%))) !global; background-image: $button_fill; @include _shadows(inset 0 1px transparentize($_hilight_color, 1), $_button_edge); - @if $variant == 'light' { - @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), - $_button_edge, $_button_shadow); - } - @else { - @include _shadows(inset 0 1px $_hilight_color, - $_button_edge, $_button_shadow); - } + + text-shadow: none; + -gtk-icon-shadow: none; } @else if $t==insensitive { @@ -601,4 +581,54 @@ box-shadow: none; // } +/*************************** + * Check and Radio buttons * + ***************************/ + + @mixin check($t, $c:$bg_color, $tc:$fg_color, $checked: false) { + // Check/Radio drawing function + // + // $t: check/radio type, + // $c: base button color for colored* types + // $tc: optional text color for colored* types + // $checked: bool to chose between checked/unchecked + // + // possible $t values: + // normal, hover, active, insensitive, backdrop, backdrop-insensitive + + $_border_color: if($c==$checkradio_bg_color, $c, $alt_borders_color); + $_dim_border_color: transparentize($_border_color, if($variant == 'light', 0.3, 0.7)); + + @if $t==normal { + background-clip: if($checked, border-box, padding-box); + background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%); + border-color: $_border_color; + box-shadow: 0 1px transparentize(black, 0.95); + color: $tc; + } + + @if $t==hover { + background-image: if($c == white, image(darken($c, 5%)), linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%)); + } + + @if $t==active { + box-shadow: inset 0 1px 1px 0px if($variant == 'light', rgba(0, 0, 0, 0.2), black); + } + + @if $t==insensitive { + box-shadow: none; + color: transparentize($tc, 0.3); + } + + @if $t==backdrop { + background-image: image($c); + box-shadow: none; + color: $tc; + } + + @if $t==backdrop-insensitive { + box-shadow: none; + color: transparentize($tc, 0.3); + } +} diff --git a/src/themes/Kali/sass/gtk-sass/upstream/sync.sh b/src/themes/Kali/sass/gtk-sass/upstream/sync.sh new file mode 100755 index 00000000..b27890e5 --- /dev/null +++ b/src/themes/Kali/sass/gtk-sass/upstream/sync.sh @@ -0,0 +1,28 @@ +#!/bin/sh + +VERSION=3.24.13 + +echo "[+] Pulling version $VERSION" +echo + +while read file; +do + echo + echo "[*] Downloading file $file" + echo + wget https://gitlab.gnome.org/GNOME/gtk/raw/$VERSION/gtk/theme/Adwaita/$file --timestamping + + if [ -f $file.patch ] + then + echo "[+] Apply patch" + echo + patch $file $file.patch + echo + fi +done <<- EOF + _colors.scss + _common.scss + _drawing.scss + _colors-public.scss +EOF + diff --git a/src/themes/Kali/sass/gtk.scss b/src/themes/Kali/sass/gtk.scss index 5035cf77..b47f8f6a 100644 --- a/src/themes/Kali/sass/gtk.scss +++ b/src/themes/Kali/sass/gtk.scss @@ -7,7 +7,8 @@ $variant: 'light'; @import 'gtk-sass/_colors'; -@import 'gtk-sass/_drawing'; -@import 'gtk-sass/_common'; +@import 'gtk-sass/upstream/_drawing'; +@import 'gtk-sass/upstream/_common'; +@import 'gtk-sass/_common-tweaks'; @import 'gtk-sass/_applications'; -@import 'gtk-sass/_colors-public'; +@import 'gtk-sass/upstream/_colors-public';