diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css index 9a2e869..9e90bb9 100755 --- a/gtk-4.0/gtk-dark.css +++ b/gtk-4.0/gtk-dark.css @@ -1685,8 +1685,8 @@ spinbutton:not(.vertical), entry { background-position: right center; border: none; box-shadow: none; } - spinbutton.flat:focus:not(.vertical), spinbutton.flat:not(.vertical), - entry.flat:focus, + spinbutton.flat:focus-within:not(.vertical), spinbutton.flat:not(.vertical), + entry.flat:focus-within, entry.flat { min-height: 0; padding: 2px; @@ -1694,8 +1694,8 @@ spinbutton:not(.vertical), entry { border-color: transparent; box-shadow: none; border-radius: 0; } - spinbutton:focus:not(.vertical), - entry:focus { + spinbutton:focus-within:not(.vertical), + entry:focus-within { border-color: #980ba2; } spinbutton:disabled:not(.vertical), entry:disabled { @@ -1723,8 +1723,8 @@ spinbutton:not(.vertical), entry { background-color: #181b28; color: #e6133e; border-color: #410512; } - spinbutton.error:focus:not(.vertical), - entry.error:focus { + spinbutton.error:focus-within:not(.vertical), + entry.error:focus-within { border-color: #410512; } spinbutton.error:selected:focus:not(.vertical), spinbutton.error:selected:not(.vertical), entry.error:selected:focus, @@ -1737,8 +1737,8 @@ spinbutton:not(.vertical), entry { background-color: #181b28; color: #cc5500; border-color: #1a0b00; } - spinbutton.warning:focus:not(.vertical), - entry.warning:focus { + spinbutton.warning:focus-within:not(.vertical), + entry.warning:focus-within { border-color: #1a0b00; } spinbutton.warning:selected:focus:not(.vertical), spinbutton.warning:selected:not(.vertical), entry.warning:selected:focus, @@ -1756,8 +1756,8 @@ spinbutton:not(.vertical), entry { spinbutton:not(.vertical) image:backdrop, entry image:backdrop { color: #5c5f6b; } - spinbutton:drop(active):focus:not(.vertical), spinbutton:drop(active):not(.vertical), - entry:drop(active):focus, + spinbutton:drop(active):focus-within:not(.vertical), spinbutton:drop(active):not(.vertical), + entry:drop(active):focus-within, entry:drop(active) { border-color: #71f79f; box-shadow: inset 0 0 0 1px #71f79f; } @@ -1769,8 +1769,8 @@ spinbutton:not(.vertical), entry { box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } - .osd spinbutton:focus:not(.vertical), - .osd entry:focus { + .osd spinbutton:focus-within:not(.vertical), + .osd entry:focus-within { color: white; border-color: #c50ed2; background-color: rgba(0, 0, 0, 0.5); @@ -1808,16 +1808,16 @@ entry progress { spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { background-color: transparent; } -.linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > -entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > -entry:focus + button, .linked:not(.vertical) > -entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + +.linked:not(.vertical) > spinbutton:focus-within:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus-within:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus-within:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > +entry:focus-within + spinbutton:not(.vertical), .linked:not(.vertical) > +entry:focus-within + button, .linked:not(.vertical) > +entry:focus-within + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus-within:not(.vertical) + entry, .linked:not(.vertical) > -entry:focus + +entry:focus-within + entry { border-left-color: #980ba2; } -.linked:not(.vertical) > spinbutton:focus:not(.vertical), .linked:not(.vertical) > -entry:focus { +.linked:not(.vertical) > spinbutton:focus-within:not(.vertical), .linked:not(.vertical) > +entry:focus-within { border-color: #980ba2; } .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > @@ -1878,14 +1878,14 @@ entry:drop(active):not(:only-child) + button, entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #71f79f; } -treeview entry:focus:dir(rtl), treeview entry:focus:dir(ltr) { +treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { background-color: #181b28; transition-property: color, background; } treeview entry.flat, treeview entry { border-radius: 0; background-image: none; background-color: #181b28; } - treeview entry.flat:focus, treeview entry:focus { + treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #c50ed2; } /************* diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css index dcbf6c3..535fb5e 100755 --- a/gtk-4.0/gtk.css +++ b/gtk-4.0/gtk.css @@ -1685,8 +1685,8 @@ spinbutton:not(.vertical), entry { background-position: right center; border: none; box-shadow: none; } - spinbutton.flat:focus:not(.vertical), spinbutton.flat:not(.vertical), - entry.flat:focus, + spinbutton.flat:focus-within:not(.vertical), spinbutton.flat:not(.vertical), + entry.flat:focus-within, entry.flat { min-height: 0; padding: 2px; @@ -1694,8 +1694,8 @@ spinbutton:not(.vertical), entry { border-color: transparent; box-shadow: none; border-radius: 0; } - spinbutton:focus:not(.vertical), - entry:focus { + spinbutton:focus-within:not(.vertical), + entry:focus-within { border-color: #980ba2; } spinbutton:disabled:not(.vertical), entry:disabled { @@ -1723,8 +1723,8 @@ spinbutton:not(.vertical), entry { background-color: #181b28; color: #e6133e; border-color: #410512; } - spinbutton.error:focus:not(.vertical), - entry.error:focus { + spinbutton.error:focus-within:not(.vertical), + entry.error:focus-within { border-color: #410512; } spinbutton.error:selected:focus:not(.vertical), spinbutton.error:selected:not(.vertical), entry.error:selected:focus, @@ -1737,8 +1737,8 @@ spinbutton:not(.vertical), entry { background-color: #181b28; color: #cc5500; border-color: #1a0b00; } - spinbutton.warning:focus:not(.vertical), - entry.warning:focus { + spinbutton.warning:focus-within:not(.vertical), + entry.warning:focus-within { border-color: #1a0b00; } spinbutton.warning:selected:focus:not(.vertical), spinbutton.warning:selected:not(.vertical), entry.warning:selected:focus, @@ -1756,8 +1756,8 @@ spinbutton:not(.vertical), entry { spinbutton:not(.vertical) image:backdrop, entry image:backdrop { color: #5c5f6b; } - spinbutton:drop(active):focus:not(.vertical), spinbutton:drop(active):not(.vertical), - entry:drop(active):focus, + spinbutton:drop(active):focus-within:not(.vertical), spinbutton:drop(active):not(.vertical), + entry:drop(active):focus-within, entry:drop(active) { border-color: #71f79f; box-shadow: inset 0 0 0 1px #71f79f; } @@ -1769,8 +1769,8 @@ spinbutton:not(.vertical), entry { box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } - .osd spinbutton:focus:not(.vertical), - .osd entry:focus { + .osd spinbutton:focus-within:not(.vertical), + .osd entry:focus-within { color: white; border-color: #c50ed2; background-color: rgba(0, 0, 0, 0.5); @@ -1808,16 +1808,16 @@ entry progress { spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { background-color: transparent; } -.linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > -entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > -entry:focus + button, .linked:not(.vertical) > -entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + +.linked:not(.vertical) > spinbutton:focus-within:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus-within:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus-within:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > +entry:focus-within + spinbutton:not(.vertical), .linked:not(.vertical) > +entry:focus-within + button, .linked:not(.vertical) > +entry:focus-within + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus-within:not(.vertical) + entry, .linked:not(.vertical) > -entry:focus + +entry:focus-within + entry { border-left-color: #980ba2; } -.linked:not(.vertical) > spinbutton:focus:not(.vertical), .linked:not(.vertical) > -entry:focus { +.linked:not(.vertical) > spinbutton:focus-within:not(.vertical), .linked:not(.vertical) > +entry:focus-within { border-color: #980ba2; } .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > @@ -1878,14 +1878,14 @@ entry:drop(active):not(:only-child) + button, entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #71f79f; } -treeview entry:focus:dir(rtl), treeview entry:focus:dir(ltr) { +treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { background-color: #181b28; transition-property: color, background; } treeview entry.flat, treeview entry { border-radius: 0; background-image: none; background-color: #181b28; } - treeview entry.flat:focus, treeview entry:focus { + treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #c50ed2; } /************* diff --git a/gtk-4.0/widgets/_entries.scss b/gtk-4.0/widgets/_entries.scss index f30c017..e9785e5 100644 --- a/gtk-4.0/widgets/_entries.scss +++ b/gtk-4.0/widgets/_entries.scss @@ -2,180 +2,181 @@ * Text Entries * ****************/ -%entry, -entry { - %entry_basic, & { - min-height: 28px; - padding-left: 8px; - padding-right: 8px; - border: 1px solid; - border-radius: 3px; - transition: all 200ms $ease-out-quad; - - @include entry(normal); - - image { // icons inside the entry - &.left { padding-left: 0; padding-right: 6px; } - &.right { padding-left: 6px; padding-right: 0; } - } - - undershoot { - &.left { @include undershoot(left); } - &.right { @include undershoot(right); } - } - - &.flat { - &:focus, & { - min-height: 0; - padding: 2px; - background-image: none; - border-color: transparent; - box-shadow: none; - border-radius: 0; - } - } - - &:focus { @include entry(focus); } - - &:disabled { @include entry(insensitive); } - - &:backdrop { - @include entry(backdrop); - - transition: $backdrop_transition; - } - - &:backdrop:disabled { @include entry(backdrop-insensitive); } - - selection { &:focus, & { @extend %selected_items; }} - - // entry error and warning style - @each $e_type, $e_color in (error, $error_color), - (warning, $warning_color) { - &.#{$e_type} { - @include entry(normal); - color: $e_color; - border-color: entry_focus_border($e_color); - - &:focus { @include entry(focus, $e_color); } - - &:selected { &:focus, & { background-color: $e_color; }} - } - } - - & image { // entry icons colors - color: mix($fg_color, $base_color, 80%); - - &:hover { color: $fg_color; } - - &:active { color: $selected_bg_color; } - - &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); } - } - - &:drop(active) { - &:focus, & { - border-color: $drop_target_color; - box-shadow: inset 0 0 0 1px $drop_target_color; - } - } - - .osd & { - @include entry(osd); - - &:focus { @include entry(osd-focus); } - - &:backdrop { @include entry(osd-backdrop); } - - &:disabled { @include entry(osd-insensitive); } - } - } - - progress { - margin: 2px -6px; - background-color: transparent; - background-image: none; - border-radius: 0; - border-width: 0 0 2px; - border-color: $selected_bg_color; - border-style: solid; - box-shadow: none; - - &:backdrop { background-color: transparent; } - } - - // linked entries - .linked:not(.vertical) > & { @extend %linked; } - .linked:not(.vertical) > &:focus + &, - .linked:not(.vertical) > &:focus + button, - .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); } - - .linked:not(.vertical) > &:focus { border-color: entry_focus_border(); } - - .linked:not(.vertical) > &:drop(active) + &, - .linked:not(.vertical) > &:drop(active) + button, - .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; } - - // Vertically linked entries - // FIXME: take care of "colored" entries - .linked.vertical > & { - @extend %linked_vertical; - - // brighter border between linked entries - &:not(:disabled) + entry:not(:disabled), - &:not(:disabled) + %entry:not(:disabled) { - border-top-color: mix($borders_color, $base_color, 30%); - background-image: linear-gradient(to bottom, $base_color, $base_color); - - &:backdrop { - border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - background-image: linear-gradient(to bottom, $backdrop_base_color, $backdrop_base_color); - } - } - - // brighter border between linked insensitive entries - &:disabled + %entry:disabled, - &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); } - - // color back the top border of a linked focused entry following another entry and add back the focus shadow. - // :not(:only-child) is a specificity bump hack. - + %entry:focus:not(:only-child), - + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); } - - + %entry:drop(active):not(:only-child), - + entry:drop(active):not(:only-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. - &:focus:not(:only-child) { - + %entry, - + entry, - + button, - + combobox > box > button.combo { border-top-color: entry_focus_border(); } - } - - &:drop(active):not(:only-child) { - + %entry, - + entry, - + button, - + combobox > box > button.combo { border-top-color: $drop_target_color; } - } - } -} - -treeview entry { - &:focus { - &:dir(rtl), &:dir(ltr) { // specificity bump hack - background-color: $base_color; - transition-property: color, background; - } - } - - &.flat, & { - border-radius: 0; - background-image: none; - background-color: $base_color; - - &:focus { border-color: $selected_bg_color; } - } -} + %entry, + entry { + %entry_basic, & { + min-height: 28px; + padding-left: 8px; + padding-right: 8px; + border: 1px solid; + border-radius: 3px; + transition: all 200ms $ease-out-quad; + + @include entry(normal); + + image { // icons inside the entry + &.left { padding-left: 0; padding-right: 6px; } + &.right { padding-left: 6px; padding-right: 0; } + } + + undershoot { + &.left { @include undershoot(left); } + &.right { @include undershoot(right); } + } + + &.flat { + &:focus-within, & { + min-height: 0; + padding: 2px; + background-image: none; + border-color: transparent; + box-shadow: none; + border-radius: 0; + } + } + + &:focus-within { @include entry(focus); } + + &:disabled { @include entry(insensitive); } + + &:backdrop { + @include entry(backdrop); + + transition: $backdrop_transition; + } + + &:backdrop:disabled { @include entry(backdrop-insensitive); } + + selection { &:focus, & { @extend %selected_items; }} + + // entry error and warning style + @each $e_type, $e_color in (error, $error_color), + (warning, $warning_color) { + &.#{$e_type} { + @include entry(normal); + color: $e_color; + border-color: entry_focus_border($e_color); + + &:focus-within { @include entry(focus, $e_color); } + + &:selected { &:focus, & { background-color: $e_color; }} + } + } + + & image { // entry icons colors + color: mix($fg_color, $base_color, 80%); + + &:hover { color: $fg_color; } + + &:active { color: $selected_bg_color; } + + &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); } + } + + &:drop(active) { + &:focus-within, & { + border-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; + } + } + + .osd & { + @include entry(osd); + + &:focus-within { @include entry(osd-focus); } + + &:backdrop { @include entry(osd-backdrop); } + + &:disabled { @include entry(osd-insensitive); } + } + } + + progress { + margin: 2px -6px; + background-color: transparent; + background-image: none; + border-radius: 0; + border-width: 0 0 2px; + border-color: $selected_bg_color; + border-style: solid; + box-shadow: none; + + &:backdrop { background-color: transparent; } + } + + // linked entries + .linked:not(.vertical) > & { @extend %linked; } + .linked:not(.vertical) > &:focus-within + &, + .linked:not(.vertical) > &:focus-within + button, + .linked:not(.vertical) > &:focus-within + combobox > box > button.combo { border-left-color: entry_focus_border(); } + + .linked:not(.vertical) > &:focus-within { border-color: entry_focus_border(); } + + .linked:not(.vertical) > &:drop(active) + &, + .linked:not(.vertical) > &:drop(active) + button, + .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; } + + // Vertically linked entries + // FIXME: take care of "colored" entries + .linked.vertical > & { + @extend %linked_vertical; + + // brighter border between linked entries + &:not(:disabled) + entry:not(:disabled), + &:not(:disabled) + %entry:not(:disabled) { + border-top-color: mix($borders_color, $base_color, 30%); + background-image: linear-gradient(to bottom, $base_color, $base_color); + + &:backdrop { + border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); + background-image: linear-gradient(to bottom, $backdrop_base_color, $backdrop_base_color); + } + } + + // brighter border between linked insensitive entries + &:disabled + %entry:disabled, + &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); } + + // color back the top border of a linked focused entry following another entry and add back the focus shadow. + // :not(:only-child) is a specificity bump hack. + + %entry:focus:not(:only-child), + + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); } + + + %entry:drop(active):not(:only-child), + + entry:drop(active):not(:only-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. + &:focus:not(:only-child) { + + %entry, + + entry, + + button, + + combobox > box > button.combo { border-top-color: entry_focus_border(); } + } + + &:drop(active):not(:only-child) { + + %entry, + + entry, + + button, + + combobox > box > button.combo { border-top-color: $drop_target_color; } + } + } + } + + treeview entry { + &:focus-within { + &:dir(rtl), &:dir(ltr) { // specificity bump hack + background-color: $base_color; + transition-property: color, background; + } + } + + &.flat, & { + border-radius: 0; + background-image: none; + background-color: $base_color; + + &:focus-within { border-color: $selected_bg_color; } + } + } + \ No newline at end of file