From d4250eecf716d92700fb37251d9d954a5a3476e7 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Tue, 2 Sep 2014 21:25:53 +0200 Subject: [PATCH] Adwaita: special case button in selected list rows Buttons on blue bg needs to have no shadow and, for the light variant, darker borders. --- gtk/resources/theme/Adwaita/_common.scss | 39 +++++++- .../theme/Adwaita/gtk-contained-dark.css | 80 ++++++++++++++++- gtk/resources/theme/Adwaita/gtk-contained.css | 88 ++++++++++++++++++- 3 files changed, 204 insertions(+), 3 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index 4b3561dc02..2f95c82be2 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -2230,12 +2230,49 @@ GtkScrolledWindow { } .list-row:selected { - //FIXME %selected_items needs to be a mixin color: $selected_fg_color; background-color: $selected_bg_color; &:backdrop { color: $backdrop_base_color; } + .button { + @include button(normal, $noedge:true); + @if $variant == 'light' { border-color: $selected_borders_color; } + &:hover, &.flat:hover { + @include button(hover, $noedge:true); + @if $variant == 'light' { border-color: $selected_borders_color; } + } + &:active, &.flat:active, + &:checked, &.flat:checked { + @include button(active, $noedge:true); + @if $variant == 'light' { border-color: $selected_borders_color; } + } + &:backdrop { + @include button(backdrop, $noedge:true); + @if $variant == 'light' { border-color: $selected_borders_color; } + &:active, &:checked { + @include button(backdrop-active, $noedge:true); + @if $variant == 'light' { border-color: $selected_borders_color; } + } + &:insensitive { + @include button(backdrop-insensitive, $noedge:true); + @if $variant == 'light' { border-color: $selected_borders_color; } + } + &:insensitive:active { + @include button(backdrop-insensitive-active, $noedge:true); + @if $variant == 'light' { border-color: $selected_borders_color; } + } + } + &:insensitive { + @include button(insensitive, $noedge:true); + @if $variant == 'light' { border-color: $selected_borders_color; } + } + &.flat, &.flat:backdrop, &.flat:backdrop:insensitive { + @extend %undecorated_button; + } + //FIXME: make placeholder with buttons w/o edge to be extended around + // istead of repeating everytime this stuff. + } } /*.list-row.button:selected, diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index ac2a86c4c9..ed0d71c714 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -902,7 +902,15 @@ GtkCalendar.header .button.titlebutton, .button.flat:backdrop, .button.flat:back .titlebar .button.titlebutton:backdrop:insensitive, GtkCalendar.header .button.titlebutton:backdrop:insensitive, .menuitem.button.flat, .menuitem.button.flat:backdrop, .header-bar .menuitem.button.titlebutton:backdrop, .titlebar .menuitem.button.titlebutton:backdrop, -GtkCalendar.header .menuitem.button.titlebutton:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, .button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, .list-row.button:backdrop:hover, .app-notification.frame .button.flat, .app-notification.frame .header-bar .button.titlebutton, .header-bar .app-notification.frame .button.titlebutton, +GtkCalendar.header .menuitem.button.titlebutton:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, .button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, .list-row.button:backdrop:hover, .list-row:selected .button.flat, .list-row:selected .header-bar .button.titlebutton, .header-bar .list-row:selected .button.titlebutton, +.list-row:selected .titlebar .button.titlebutton, +.titlebar .list-row:selected .button.titlebutton, +.list-row:selected GtkCalendar.header .button.titlebutton, +GtkCalendar.header .list-row:selected .button.titlebutton, .list-row:selected .button.flat:backdrop, .list-row:selected .button.flat:backdrop:insensitive, .list-row:selected .header-bar .button.titlebutton:backdrop:insensitive, .header-bar .list-row:selected .button.titlebutton:backdrop:insensitive, +.list-row:selected .titlebar .button.titlebutton:backdrop:insensitive, +.titlebar .list-row:selected .button.titlebutton:backdrop:insensitive, +.list-row:selected GtkCalendar.header .button.titlebutton:backdrop:insensitive, +GtkCalendar.header .list-row:selected .button.titlebutton:backdrop:insensitive, .app-notification.frame .button.flat, .app-notification.frame .header-bar .button.titlebutton, .header-bar .app-notification.frame .button.titlebutton, .app-notification.frame .titlebar .button.titlebutton, .titlebar .app-notification.frame .button.titlebutton, .app-notification.frame GtkCalendar.header .button.titlebutton, @@ -2968,6 +2976,76 @@ GtkScrolledWindow GtkViewport.frame { background-color: #215d9c; } .list-row:selected:backdrop { color: #2c2c2c; } + .list-row:selected .button { + color: #eeeeec; + background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232); + border-color: #1c1f1f; + text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); + icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + .list-row:selected .button:hover, .list-row:selected .button.flat:hover, .list-row:selected .header-bar .button.titlebutton:hover, .header-bar .list-row:selected .button.titlebutton:hover, + .list-row:selected .titlebar .button.titlebutton:hover, + .titlebar .list-row:selected .button.titlebutton:hover, + .list-row:selected GtkCalendar.header .button.titlebutton:hover, + GtkCalendar.header .list-row:selected .button.titlebutton:hover { + color: #eeeeec; + border-color: #1c1f1f; + background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f); + text-shadow: 0 -1px rgba(0, 0, 0, 0.77976); + icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + .list-row:selected .button:active, .list-row:selected .button.flat:active, .list-row:selected .header-bar .button.titlebutton:active, .header-bar .list-row:selected .button.titlebutton:active, + .list-row:selected .titlebar .button.titlebutton:active, + .titlebar .list-row:selected .button.titlebutton:active, + .list-row:selected GtkCalendar.header .button.titlebutton:active, + GtkCalendar.header .list-row:selected .button.titlebutton:active, .list-row:selected .button:checked, .list-row:selected .button.flat:checked, .list-row:selected .header-bar .button.titlebutton:checked, .header-bar .list-row:selected .button.titlebutton:checked, + .list-row:selected .titlebar .button.titlebutton:checked, + .titlebar .list-row:selected .button.titlebutton:checked, + .list-row:selected GtkCalendar.header .button.titlebutton:checked, + GtkCalendar.header .list-row:selected .button.titlebutton:checked { + color: #eeeeec; + border-color: #1c1f1f; + background-image: linear-gradient(to bottom, #232727, #2d3232); + text-shadow: 0 -1px rgba(0, 0, 0, 0.89176); + icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176); + box-shadow: inset 0 1px rgba(0, 0, 0, 0.07), inset 0 2px 1px -2px rgba(0, 0, 0, 0.6); } + .list-row:selected .button:backdrop { + color: #c9cbc9; + border-color: #1e2222; + background-image: linear-gradient(to bottom, #393f3f); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } + .list-row:selected .button:backdrop:active, .list-row:selected .button:backdrop:checked { + color: #c9cbc9; + border-color: #1e2222; + background-image: linear-gradient(to bottom, #2f3434); + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } + .list-row:selected .button:backdrop:insensitive { + color: #5d6767; + border-color: #1e2222; + background-image: linear-gradient(to bottom, #323636); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } + .list-row:selected .button:backdrop:insensitive > GtkLabel { + color: inherit; } + .list-row:selected .button:backdrop:insensitive:active { + color: #5d6767; + border-color: #1e2222; + background-image: linear-gradient(to bottom, #303434); + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } + .list-row:selected .button:backdrop:insensitive:active > GtkLabel { + color: inherit; } + .list-row:selected .button:insensitive { + color: #939695; + border-color: #1c1f1f; + background-image: linear-gradient(to bottom, #323636); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + .list-row:selected .button:insensitive > GtkLabel { + color: inherit; } /*.list-row.button:selected, .list-row:selected { diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index e276198156..2c249b09ff 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -894,7 +894,15 @@ GtkCalendar.header .button.titlebutton, .button.flat:backdrop, .button.flat:back .titlebar .button.titlebutton:backdrop:insensitive, GtkCalendar.header .button.titlebutton:backdrop:insensitive, .menuitem.button.flat, .menuitem.button.flat:backdrop, .header-bar .menuitem.button.titlebutton:backdrop, .titlebar .menuitem.button.titlebutton:backdrop, -GtkCalendar.header .menuitem.button.titlebutton:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, .button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, .list-row.button:backdrop:hover, .app-notification.frame .button.flat, .app-notification.frame .header-bar .button.titlebutton, .header-bar .app-notification.frame .button.titlebutton, +GtkCalendar.header .menuitem.button.titlebutton:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, .button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, .list-row.button:backdrop:hover, .list-row:selected .button.flat, .list-row:selected .header-bar .button.titlebutton, .header-bar .list-row:selected .button.titlebutton, +.list-row:selected .titlebar .button.titlebutton, +.titlebar .list-row:selected .button.titlebutton, +.list-row:selected GtkCalendar.header .button.titlebutton, +GtkCalendar.header .list-row:selected .button.titlebutton, .list-row:selected .button.flat:backdrop, .list-row:selected .button.flat:backdrop:insensitive, .list-row:selected .header-bar .button.titlebutton:backdrop:insensitive, .header-bar .list-row:selected .button.titlebutton:backdrop:insensitive, +.list-row:selected .titlebar .button.titlebutton:backdrop:insensitive, +.titlebar .list-row:selected .button.titlebutton:backdrop:insensitive, +.list-row:selected GtkCalendar.header .button.titlebutton:backdrop:insensitive, +GtkCalendar.header .list-row:selected .button.titlebutton:backdrop:insensitive, .app-notification.frame .button.flat, .app-notification.frame .header-bar .button.titlebutton, .header-bar .app-notification.frame .button.titlebutton, .app-notification.frame .titlebar .button.titlebutton, .titlebar .app-notification.frame .button.titlebutton, .app-notification.frame GtkCalendar.header .button.titlebutton, @@ -3108,6 +3116,84 @@ GtkScrolledWindow GtkViewport.frame { background-color: #4a90d9; } .list-row:selected:backdrop { color: #fcfcfc; } + .list-row:selected .button { + color: #2e3436; + background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); + border-color: #a1a1a1; + text-shadow: 0 1px rgba(255, 255, 255, 0.76923); + icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); + box-shadow: inset 0 1px white; + border-color: #184472; } + .list-row:selected .button:hover, .list-row:selected .button.flat:hover, .list-row:selected .header-bar .button.titlebutton:hover, .header-bar .list-row:selected .button.titlebutton:hover, + .list-row:selected .titlebar .button.titlebutton:hover, + .titlebar .list-row:selected .button.titlebutton:hover, + .list-row:selected GtkCalendar.header .button.titlebutton:hover, + GtkCalendar.header .list-row:selected .button.titlebutton:hover { + color: #2e3436; + border-color: #a1a1a1; + background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed); + text-shadow: 0 1px rgba(255, 255, 255, 0.76923); + icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); + box-shadow: inset 0 1px white; + border-color: #184472; } + .list-row:selected .button:active, .list-row:selected .button.flat:active, .list-row:selected .header-bar .button.titlebutton:active, .header-bar .list-row:selected .button.titlebutton:active, + .list-row:selected .titlebar .button.titlebutton:active, + .titlebar .list-row:selected .button.titlebutton:active, + .list-row:selected GtkCalendar.header .button.titlebutton:active, + GtkCalendar.header .list-row:selected .button.titlebutton:active, .list-row:selected .button:checked, .list-row:selected .button.flat:checked, .list-row:selected .header-bar .button.titlebutton:checked, .header-bar .list-row:selected .button.titlebutton:checked, + .list-row:selected .titlebar .button.titlebutton:checked, + .titlebar .list-row:selected .button.titlebutton:checked, + .list-row:selected GtkCalendar.header .button.titlebutton:checked, + GtkCalendar.header .list-row:selected .button.titlebutton:checked { + color: #2e3436; + border-color: #a1a1a1; + background-image: linear-gradient(to bottom, #d6d6d6, #e0e0e0); + text-shadow: 0 1px rgba(255, 255, 255, 0.76923); + icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); + box-shadow: inset 0 1px rgba(0, 0, 0, 0.07), inset 0 2px 1px -2px rgba(0, 0, 0, 0.6); + border-color: #184472; } + .list-row:selected .button:backdrop { + color: #54595a; + border-color: #a8a8a8; + background-image: linear-gradient(to bottom, #ededed); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); + border-color: #184472; } + .list-row:selected .button:backdrop:active, .list-row:selected .button:backdrop:checked { + color: #54595a; + border-color: #a8a8a8; + background-image: linear-gradient(to bottom, #d4d4d4); + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); + border-color: #184472; } + .list-row:selected .button:backdrop:insensitive { + color: #c7c7c7; + border-color: #a8a8a8; + background-image: linear-gradient(to bottom, #f4f4f4); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); + border-color: #184472; } + .list-row:selected .button:backdrop:insensitive > GtkLabel { + color: inherit; } + .list-row:selected .button:backdrop:insensitive:active { + color: #c7c7c7; + border-color: #a8a8a8; + background-image: linear-gradient(to bottom, #ededed); + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); + border-color: #184472; } + .list-row:selected .button:backdrop:insensitive:active > GtkLabel { + color: inherit; } + .list-row:selected .button:insensitive { + color: #8d9091; + border-color: #a1a1a1; + background-image: linear-gradient(to bottom, #f4f4f4); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); + border-color: #184472; } + .list-row:selected .button:insensitive > GtkLabel { + color: inherit; } /*.list-row.button:selected, .list-row:selected {