diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 7b6500e1ae..16dc9f9ddd 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -2856,20 +2856,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. @@ -2898,6 +2920,12 @@ radio { color: inherit; border-color: currentColor; } + &:indeterminate, &:checked { + &:hover { + color: $checkradio_fg_color; + border-color: darken($checkradio_bg_color, if($variant=='light', 15%, 30%)); + } + } } } @@ -2957,15 +2985,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 diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss index 77481848cd..5d6b775d86 100644 --- a/gtk/theme/Adwaita/_drawing.scss +++ b/gtk/theme/Adwaita/_drawing.scss @@ -568,3 +568,54 @@ border: none; // 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/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index c11db9371e..4f3f139ef3 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -1,3 +1,4 @@ +/*************************** Check and Radio buttons * */ * { padding: 0; -gtk-secondary-caret-color: #15539e; } button:focus(visible), checkbutton:focus(visible), radiobutton:focus(visible), switch:focus(visible), scale:focus(visible), label:focus(visible), row:focus(visible), flowboxchild:focus(visible) { outline-color: alpha(currentColor,0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 3px; } @@ -1163,7 +1164,7 @@ switch:backdrop:disabled slider label, switch:backdrop:disabled slider { color: checkbutton.text-button, radiobutton.text-button { padding: 2px 0; outline-offset: 0; border-spacing: 4px; } -check, radio { margin: 0 4px; 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: #070707; text-shadow: 0 -1px rgba(0, 0, 0, 0.834353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.834353); background-image: linear-gradient(to bottom, #2d2d2d 20%, #262626 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); } +check, radio { margin: 0 4px; min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; } check:only-child, radio:only-child { margin: 0; } @@ -1171,25 +1172,43 @@ popover check.left:dir(rtl), popover radio.left:dir(rtl) { margin-left: 0; margi popover check.right:dir(ltr), 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: #092444; 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, #15539e 20%, #13498c 90%); } +check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, #424242 20%, #353535 90%); border-color: #070707; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #eeeeec; } -check:hover:not(:checked), radio:hover:not(:checked) { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #070707; 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, #353535 20%, #2b2b2b 90%); } +check:hover, radio:hover { background-image: linear-gradient(to bottom, #4c4c4c 10%, #3f3f3f 90%); } -check:active, radio:active { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #0f3b71; background-image: image(#103e75); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } +check:active, radio:active { box-shadow: inset 0 1px 1px 0px black; } -check:checked, radio:checked { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #092444; text-shadow: 0 -1px rgba(0, 0, 0, 0.719216); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.719216); background-image: linear-gradient(to bottom, #134c90 20%, #114583 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); } +check:disabled, radio:disabled { box-shadow: none; color: rgba(238, 238, 236, 0.7); } -check:disabled, radio:disabled { border-color: #1b1b1b; background-image: image(#323232); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } +check:backdrop, radio:backdrop { background-image: image(#353535); box-shadow: none; color: #eeeeec; } -check:disabled label, check:disabled, radio:disabled label, radio:disabled { color: #919190; } +check:backdrop:disabled, radio:backdrop:disabled { box-shadow: none; color: rgba(238, 238, 236, 0.7); } -check:backdrop, radio:backdrop { border-color: #202020; background-image: image(#353535); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); transition: 200ms ease-out; } +check:checked, radio:checked { background-clip: border-box; background-image: linear-gradient(to bottom, #185fb4 20%, #15539e 90%); border-color: #15539e; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } -check:backdrop label, check:backdrop, radio:backdrop label, radio:backdrop { color: #919190; } +check:checked:hover, radio:checked:hover { background-image: linear-gradient(to bottom, #1b68c6 10%, #185cb0 90%); } -check:backdrop:disabled, radio:backdrop:disabled { border-color: #202020; background-image: image(#323232); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } +check:checked:active, radio:checked:active { box-shadow: inset 0 1px 1px 0px black; } -check:backdrop:disabled label, check:backdrop:disabled, radio:backdrop:disabled label, radio:backdrop:disabled { color: #5b5b5b; } +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(#15539e); 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, #185fb4 20%, #15539e 90%); border-color: #15539e; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } + +check:indeterminate:hover, radio:indeterminate:hover { background-image: linear-gradient(to bottom, #1b68c6 10%, #185cb0 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(#15539e); 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; } .osd check, .osd radio { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(38, 38, 38, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(238, 238, 236, 0.3); } @@ -1205,6 +1224,8 @@ 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 { min-height: 14px; min-width: 14px; background-image: none; background-color: transparent; box-shadow: none; -gtk-icon-shadow: none; color: inherit; border-color: currentColor; } +menu menuitem check:indeterminate:hover, menu menuitem check:checked:hover, menu menuitem radio:indeterminate:hover, menu menuitem radio:checked:hover { color: #ffffff; border-color: #030c17; } + check { border-radius: 3px; -gtk-icon-size: 14px; } check:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")), -gtk-recolor(url("assets/check@2-symbolic.symbolic.png"))); } @@ -1229,12 +1250,6 @@ menu menuitem radio:checked:not(:backdrop), menu menuitem radio:indeterminate:no 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: #919190; } - -treeview.view check:selected:disabled:backdrop, treeview.view radio:selected:disabled:backdrop { color: #5b5b5b; } - -treeview.view check:backdrop:selected, treeview.view check:backdrop, treeview.view radio:backdrop:selected, treeview.view radio:backdrop { color: #919190; } - /************ GtkScale * */ scale trough, scale fill, progressbar trough { border: 1px solid #1b1b1b; border-radius: 3px; background-color: #282828; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 2593a4c41a..1f6093d7c4 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -1,3 +1,4 @@ +/*************************** Check and Radio buttons * */ * { padding: 0; -gtk-secondary-caret-color: #3584e4; } button:focus(visible), checkbutton:focus(visible), radiobutton:focus(visible), switch:focus(visible), scale:focus(visible), label:focus(visible), row:focus(visible), flowboxchild:focus(visible) { outline-color: alpha(currentColor,0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 3px; } @@ -1177,7 +1178,7 @@ row:selected switch slider:checked, row:selected switch slider { border-color: # checkbutton.text-button, radiobutton.text-button { padding: 2px 0; outline-offset: 0; border-spacing: 4px; } -check, radio { margin: 0 4px; min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); background-image: linear-gradient(to bottom, white 20%, #f6f5f4 90%); box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } +check, radio { margin: 0 4px; min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; } check:only-child, radio:only-child { margin: 0; } @@ -1185,25 +1186,43 @@ popover check.left:dir(rtl), popover radio.left:dir(rtl) { margin-left: 0; margi popover check.right:dir(ltr), 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: #15539e; 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, #5d9de9 10%, #478fe6 90%); } +check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, white 20%, white 90%); border-color: #bfb8b1; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #2e3436; } -check:hover:not(:checked), radio:hover:not(:checked) { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; 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%); } +check:hover, radio:hover { background-image: image(#f2f2f2); } -check:active, radio:active { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #1b6acb; background-image: image(#1961b9); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } +check:active, radio:active { box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.2); } -check:checked, radio:checked { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #15539e; text-shadow: 0 -1px rgba(0, 0, 0, 0.559216); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.559216); background-image: linear-gradient(to bottom, #4b92e7 20%, #3584e4 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); } +check:disabled, radio:disabled { box-shadow: none; color: rgba(46, 52, 54, 0.7); } -check:disabled, radio:disabled { border-color: #cdc7c2; background-image: image(#faf9f8); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } +check:backdrop, radio:backdrop { background-image: image(white); box-shadow: none; color: #2e3436; } -check:disabled label, check:disabled, radio:disabled label, radio:disabled { color: #929595; } +check:backdrop:disabled, radio:backdrop:disabled { box-shadow: none; color: rgba(46, 52, 54, 0.7); } -check:backdrop, radio:backdrop { border-color: #d5d0cc; background-image: image(#f6f5f4); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); transition: 200ms ease-out; } +check:checked, radio:checked { background-clip: border-box; background-image: linear-gradient(to bottom, #4b92e7 20%, #3584e4 90%); border-color: #3584e4; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } -check:backdrop label, check:backdrop, radio:backdrop label, radio:backdrop { color: #929595; } +check:checked:hover, radio:checked:hover { background-image: linear-gradient(to bottom, #5d9de9 10%, #478fe6 90%); } -check:backdrop:disabled, radio:backdrop:disabled { border-color: #d5d0cc; background-image: image(#faf9f8); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } +check:checked:active, radio:checked:active { box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.2); } -check:backdrop:disabled label, check:backdrop:disabled, radio:backdrop:disabled label, radio:backdrop:disabled { color: #d4cfca; } +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(#3584e4); 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, #4b92e7 20%, #3584e4 90%); border-color: #3584e4; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } + +check:indeterminate:hover, radio:indeterminate:hover { background-image: linear-gradient(to bottom, #5d9de9 10%, #478fe6 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(#3584e4); 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; } row:selected check, row:selected radio { border-color: #185fb4; } @@ -1221,6 +1240,8 @@ 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 { min-height: 14px; min-width: 14px; background-image: none; background-color: transparent; box-shadow: none; -gtk-icon-shadow: none; color: inherit; border-color: currentColor; } +menu menuitem check:indeterminate:hover, menu menuitem check:checked:hover, menu menuitem radio:indeterminate:hover, menu menuitem radio:checked:hover { color: #ffffff; border-color: #185fb4; } + check { border-radius: 3px; -gtk-icon-size: 14px; } check:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")), -gtk-recolor(url("assets/check@2-symbolic.symbolic.png"))); } @@ -1245,12 +1266,6 @@ menu menuitem radio:checked:not(:backdrop), menu menuitem radio:indeterminate:no treeview.view check:selected:focus, treeview.view check:selected, treeview.view radio:selected:focus, treeview.view radio:selected { color: #ffffff; border-color: #185fb4; } -treeview.view check:selected:disabled, treeview.view radio:selected:disabled { color: #929595; } - -treeview.view check:selected:disabled:backdrop, treeview.view radio:selected:disabled:backdrop { color: #d4cfca; } - -treeview.view check:backdrop:selected, treeview.view check:backdrop, treeview.view radio:backdrop:selected, treeview.view radio:backdrop { color: #929595; } - /************ GtkScale * */ scale trough, scale fill, progressbar trough { border: 1px solid #cdc7c2; border-radius: 3px; background-color: #e1dedb; }