diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss index 17f74989ad..2edb2aefaf 100644 --- a/gtk/theme/Adwaita/_colors.scss +++ b/gtk/theme/Adwaita/_colors.scss @@ -44,6 +44,8 @@ $base_hover_color: transparentize($fg_color, 0.95); $tooltip_borders_color: transparentize(white, 0.9); $shadow_color: transparentize(black, 0.9); +$drop_target_color: black; // FIXME: we need something different than black here... + //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_bg_color: mix($bg_color, $base_color, 60%); diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 2e058f56b3..feb229d981 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -273,6 +273,7 @@ entry { background-image: none; background-color: transparent; box-shadow: none; + &:backdrop { background-color: transparent; } } @@ -281,6 +282,10 @@ entry { .linked:not(.vertical) > &:focus + button, .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); } + .linked:not(.vertical) > &:drop(active) + entry, + .linked:not(.vertical) > &:drop(active) + button, + .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; } + // entry error and warning style @each $e_type, $e_color in (error, $error_color), (warning, $warning_color) { @@ -313,6 +318,13 @@ entry { &:disabled { @include entry(osd-insensitive); } } + + &:drop(active) { + &:focus, & { + border-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; + } + } } // Vertically linked entries @@ -326,6 +338,8 @@ entry { // add back the focus shadow > entry:focus:not(:last-child) { box-shadow: entry_focus_shadow(); } + > entry:drop(active):not(:last-child) { box-shadow: inset 0 0 0 1px $drop_target_color; } + // brighter border between linked entries > entry:not(:disabled) + entry:not(:disabled) { border-top-color: mix($borders_color, $base_color, 30%); @@ -346,17 +360,26 @@ entry { box-shadow: entry_focus_shadow(); } + > entry + entry:drop(active):not(:last-child) { + border-top-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; + } + // just recolor the top border on the last focused entry, since we don't reset the shadow here letting that be // inherited by the entry styling. - > entry + entry:focus:last-child { - border-top-color: entry_focus_border(); - } + > entry + entry:focus:last-child { border-top-color: entry_focus_border(); } + + > entry + entry:drop(active):last-child { border-top-color: $drop_target_color; } // this takes care of coloring the top border of the focused entry subsequent widget. // :not(:only-child) is a specificity bump hack. > entry:focus:not(:only-child) + entry, > entry:focus:not(:only-child) + button, > entry:focus:not(:only-child) + combobox > box > button.combo { border-top-color: entry_focus_border(); } + + > entry:drop(active):not(:only-child) + entry, + > entry:drop(active):not(:only-child) + button, + > entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: $drop_target_color; } } @@ -464,6 +487,11 @@ button { padding-right: 8px; } } + + &:drop(active) { + border-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; + } } // big standalone buttons like in Documents pager @@ -1015,6 +1043,11 @@ spinbutton { &:disabled { color: $insensitive_fg_color; } &:backdrop:disabled { color: $backdrop_insensitive_color; } + &:drop(active) { + border-color: transparent; + box-shadow: none; + } + entry { min-height: 32px; min-width: 32px; @@ -1045,6 +1078,7 @@ spinbutton { // OSD vertical .osd &.vertical button:first-child { @include button(osd); + &:hover { @include button(osd-hover);} &:active { @include button(osd-active); } @@ -1084,6 +1118,12 @@ combobox { &:dir(rtl) { @extend %linked:first-child; } } } + + &:drop(active) { // FIXME: untested + box-shadow: none; + + button.combo { @extend button:drop(active); } + } } .linked > combobox > box > button.combo { @@ -3975,7 +4015,7 @@ button.circular { // FIXME: aggregate to buttons } *:drop(active):focus, -*:drop(active) { // FIXME figure out a proper color +*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die border-color: black; box-shadow: inset 0 0 0 1px black; } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index d4f31eb96b..7bee821c8e 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -235,6 +235,8 @@ entry, spinbutton:not(.vertical) { background-color: transparent; } .linked:not(.vertical) > entry:focus + entry, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + entry, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo { border-left-color: #0f2b48; } + .linked:not(.vertical) > entry:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo { + border-left-color: black; } entry.error, spinbutton.error:not(.vertical) { color: #cc0000; border-color: #1a0000; } @@ -303,11 +305,16 @@ entry, spinbutton:not(.vertical) { box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } + entry:drop(active):focus, spinbutton:drop(active):focus:not(.vertical), entry:drop(active), spinbutton:drop(active):not(.vertical) { + border-color: black; + box-shadow: inset 0 0 0 1px black; } .linked.vertical > entry:not(:last-child), .linked.vertical > spinbutton:not(:last-child):not(.vertical) { box-shadow: none; } .linked.vertical > entry:focus:not(:last-child), .linked.vertical > spinbutton:focus:not(:last-child):not(.vertical) { box-shadow: inset 0 0 0 1px #215d9c; } +.linked.vertical > entry:drop(active):not(:last-child), .linked.vertical > spinbutton:drop(active):not(:last-child):not(.vertical) { + box-shadow: inset 0 0 0 1px black; } .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #252626; background-image: linear-gradient(to bottom, #292929); } @@ -319,14 +326,25 @@ entry, spinbutton:not(.vertical) { .linked.vertical > entry + entry:focus:not(:last-child), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:last-child), .linked.vertical > entry + spinbutton:focus:not(:last-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:last-child):not(.vertical) { border-top-color: #0f2b48; box-shadow: inset 0 0 0 1px #215d9c; } +.linked.vertical > entry + entry:drop(active):not(:last-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:last-child), .linked.vertical > entry + spinbutton:drop(active):not(:last-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:last-child):not(.vertical) { + border-top-color: black; + box-shadow: inset 0 0 0 1px black; } .linked.vertical > entry + entry:focus:last-child, .linked.vertical > spinbutton:not(.vertical) + entry:focus:last-child, .linked.vertical > entry + spinbutton:focus:last-child:not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:last-child:not(.vertical) { border-top-color: #0f2b48; } +.linked.vertical > entry + entry:drop(active):last-child, .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):last-child, .linked.vertical > entry + spinbutton:drop(active):last-child:not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):last-child:not(.vertical) { + border-top-color: black; } .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > entry:focus:not(:only-child) + button, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, .linked.vertical > entry:focus:not(:only-child) + combobox > box > button.combo, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo { border-top-color: #0f2b48; } +.linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), +.linked.vertical > entry:drop(active):not(:only-child) + button, +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, +.linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo, +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo { + border-top-color: black; } /*********** * Buttons * @@ -491,6 +509,12 @@ notebook > header > tabs > arrow, headerbar button.titlebutton, .titlebar button.text-button.image-button.titlebutton label, button.text-button.image-button label { padding-left: 8px; padding-right: 8px; } + notebook > header > tabs > arrow:drop(active), headerbar button.titlebutton:drop(active), headerbar combobox:drop(active) button.titlebutton.combo, combobox:drop(active) headerbar button.titlebutton.combo, + .titlebar button.titlebutton:drop(active), + .titlebar combobox:drop(active) button.titlebutton.combo, + combobox:drop(active) .titlebar button.titlebutton.combo, button:drop(active), combobox:drop(active) button.combo { + border-color: black; + box-shadow: inset 0 0 0 1px black; } button.osd { color: #eeeeec; border-radius: 5px; @@ -1320,6 +1344,9 @@ spinbutton.vertical:disabled { color: #949796; } spinbutton.vertical:backdrop:disabled { color: #5d6767; } +spinbutton.vertical:drop(active) { + border-color: transparent; + box-shadow: none; } spinbutton.vertical entry, spinbutton.vertical spinbutton:not(.vertical) { min-height: 32px; min-width: 32px; @@ -1394,6 +1421,8 @@ combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } +combobox:drop(active) { + box-shadow: none; } /************ * Toolbars * diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index e40c9dc610..c37b744bf8 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -235,6 +235,8 @@ entry, spinbutton:not(.vertical) { background-color: transparent; } .linked:not(.vertical) > entry:focus + entry, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + entry, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo { border-left-color: #4a90d9; } + .linked:not(.vertical) > entry:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo { + border-left-color: black; } entry.error, spinbutton.error:not(.vertical) { color: #cc0000; border-color: #cc0000; } @@ -303,11 +305,16 @@ entry, spinbutton:not(.vertical) { box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } + entry:drop(active):focus, spinbutton:drop(active):focus:not(.vertical), entry:drop(active), spinbutton:drop(active):not(.vertical) { + border-color: black; + box-shadow: inset 0 0 0 1px black; } .linked.vertical > entry:not(:last-child), .linked.vertical > spinbutton:not(:last-child):not(.vertical) { box-shadow: none; } .linked.vertical > entry:focus:not(:last-child), .linked.vertical > spinbutton:focus:not(:last-child):not(.vertical) { box-shadow: inset 0 0 0 1px #4a90d9; } +.linked.vertical > entry:drop(active):not(:last-child), .linked.vertical > spinbutton:drop(active):not(:last-child):not(.vertical) { + box-shadow: inset 0 0 0 1px black; } .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #e2e2e0; background-image: linear-gradient(to bottom, #ffffff); } @@ -319,14 +326,25 @@ entry, spinbutton:not(.vertical) { .linked.vertical > entry + entry:focus:not(:last-child), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:last-child), .linked.vertical > entry + spinbutton:focus:not(:last-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:last-child):not(.vertical) { border-top-color: #4a90d9; box-shadow: inset 0 0 0 1px #4a90d9; } +.linked.vertical > entry + entry:drop(active):not(:last-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:last-child), .linked.vertical > entry + spinbutton:drop(active):not(:last-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:last-child):not(.vertical) { + border-top-color: black; + box-shadow: inset 0 0 0 1px black; } .linked.vertical > entry + entry:focus:last-child, .linked.vertical > spinbutton:not(.vertical) + entry:focus:last-child, .linked.vertical > entry + spinbutton:focus:last-child:not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:last-child:not(.vertical) { border-top-color: #4a90d9; } +.linked.vertical > entry + entry:drop(active):last-child, .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):last-child, .linked.vertical > entry + spinbutton:drop(active):last-child:not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):last-child:not(.vertical) { + border-top-color: black; } .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > entry:focus:not(:only-child) + button, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, .linked.vertical > entry:focus:not(:only-child) + combobox > box > button.combo, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo { border-top-color: #4a90d9; } +.linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), +.linked.vertical > entry:drop(active):not(:only-child) + button, +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, +.linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo, +.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo { + border-top-color: black; } /*********** * Buttons * @@ -491,6 +509,12 @@ notebook > header > tabs > arrow, headerbar button.titlebutton, .titlebar button.text-button.image-button.titlebutton label, button.text-button.image-button label { padding-left: 8px; padding-right: 8px; } + notebook > header > tabs > arrow:drop(active), headerbar button.titlebutton:drop(active), headerbar combobox:drop(active) button.titlebutton.combo, combobox:drop(active) headerbar button.titlebutton.combo, + .titlebar button.titlebutton:drop(active), + .titlebar combobox:drop(active) button.titlebutton.combo, + combobox:drop(active) .titlebar button.titlebutton.combo, button:drop(active), combobox:drop(active) button.combo { + border-color: black; + box-shadow: inset 0 0 0 1px black; } button.osd { color: #eeeeec; border-radius: 5px; @@ -1324,6 +1348,9 @@ spinbutton.vertical:disabled { color: #8b8e8f; } spinbutton.vertical:backdrop:disabled { color: #c3c3c0; } +spinbutton.vertical:drop(active) { + border-color: transparent; + box-shadow: none; } spinbutton.vertical entry, spinbutton.vertical spinbutton:not(.vertical) { min-height: 32px; min-width: 32px; @@ -1398,6 +1425,8 @@ combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } +combobox:drop(active) { + box-shadow: none; } /************ * Toolbars *