From 64fea1be044ac78fcc31db282882d9234da26ade Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Thu, 2 Oct 2014 21:16:30 +0200 Subject: [PATCH] Adwaita: needs-attention on sidebar-item Unfortunatelly it doesn't animate (not my fault) and it just work on GtkLabel (my fault). --- gtk/resources/theme/Adwaita/_common.scss | 61 +++++++++++-------- .../theme/Adwaita/gtk-contained-dark.css | 28 +++++---- gtk/resources/theme/Adwaita/gtk-contained.css | 28 +++++---- 3 files changed, 70 insertions(+), 47 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index 6b4898563b..07047730bd 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -539,30 +539,7 @@ $_dot_color: if($variant=='light', $selected_bg_color, padding: 5px 2px; } &.needs-attention > GtkLabel, - &.needs-attention > GtkImage { - animation: needs_attention 150ms ease-in; - $_dot_shadow: _text_shadow_color(); - $_dot_shadow_r: if($variant=='light',0.5,0.45); - background-image: -gtk-gradient(radial, - center center, 0, - center center, 0.5, - to($_dot_color), - to(transparent)), - -gtk-gradient(radial, - center center, 0, - center center, $_dot_shadow_r, - to($_dot_shadow), - to(transparent)); - background-size: 6px 6px, 6px 6px; - background-repeat: no-repeat; - @if $variant == 'light' { background-position: right 3px, right 4px; } - @else { background-position: right 3px, right 2px; } - &:backdrop { background-size: 6px 6px, 0 0;} - &:dir(rtl) { - @if $variant == 'light' { background-position: left 3px, left 4px; } - @else { background-position: left 3px, left 2px; } - } - } + &.needs-attention > GtkImage { @extend %needs_attention; } &.needs-attention:active > GtkLabel, &.needs-attention:active > GtkImage, &.needs-attention:checked > GtkLabel, @@ -594,6 +571,32 @@ $_dot_color: if($variant=='light', $selected_bg_color, .linked.vertical &:backdrop { @extend %linked_vertical; } } +%needs_attention { + animation: needs_attention 150ms ease-in; + $_dot_shadow: _text_shadow_color(); + $_dot_shadow_r: if($variant=='light',0.5,0.45); + background-image: -gtk-gradient(radial, + center center, 0, + center center, 0.5, + to($_dot_color), + to(transparent)), + -gtk-gradient(radial, + center center, 0, + center center, $_dot_shadow_r, + to($_dot_shadow), + to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + @if $variant == 'light' { background-position: right 3px, right 4px; } + @else { background-position: right 3px, right 2px; } + &:backdrop { background-size: 6px 6px, 0 0;} + &:dir(rtl) { + @if $variant == 'light' { background-position: left 3px, left 4px; } + @else { background-position: left 3px, left 2px; } + } +} + + // all the following is for the +|- buttons on inline toolbars, that way // should really be deprecated... .inline-toolbar GtkToolButton > .button { // redefining the button look is @@ -2556,7 +2559,15 @@ GtkFileChooserDialog { } .sidebar-item { - padding: 10px; + padding: 10px 4px; + > GtkLabel { + padding-left: 6px; + padding-right: 6px; + } + &.needs-attention > GtkLabel { + @extend %needs_attention; + background-size: 6px 6px, 0 0; + } } GtkPaned { diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index 7fe4c8619e..8160a3f03f 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -850,16 +850,6 @@ GtkCalendar.header .button.titlebutton { .titlebar .stack-switcher > .titlebutton.button, GtkCalendar.header .stack-switcher > .titlebutton.button { padding: 5px 2px; } - .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage { - animation: needs_attention 150ms ease-in; - background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)), to(transparent)); - background-size: 6px 6px, 6px 6px; - background-repeat: no-repeat; - background-position: right 3px, right 2px; } - .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop { - background-size: 6px 6px, 0 0; } - .stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) { - background-position: left 3px, left 2px; } .stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage { animation: none; background-image: none; } @@ -877,6 +867,17 @@ GtkCalendar.header .button.titlebutton { GtkCalendar.header .primary-toolbar .button.titlebutton { icon-shadow: none; } +.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage, .sidebar-item.needs-attention > GtkLabel { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)), to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + background-position: right 3px, right 2px; } + .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop, .sidebar-item.needs-attention > GtkLabel:backdrop { + background-size: 6px 6px, 0 0; } + .stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl), .sidebar-item.needs-attention > GtkLabel:dir(rtl) { + background-position: left 3px, left 2px; } + .inline-toolbar GtkToolButton > .button, .inline-toolbar .header-bar GtkToolButton > .button.titlebutton, .header-bar .inline-toolbar GtkToolButton > .button.titlebutton, .inline-toolbar .titlebar GtkToolButton > .button.titlebutton, .titlebar .inline-toolbar GtkToolButton > .button.titlebutton, @@ -3882,7 +3883,12 @@ GtkFileChooserDialog .dialog-action-box { background-color: #215d9c; } .sidebar-item { - padding: 10px; } + padding: 10px 4px; } + .sidebar-item > GtkLabel { + padding-left: 6px; + padding-right: 6px; } + .sidebar-item.needs-attention > GtkLabel { + background-size: 6px 6px, 0 0; } GtkPaned { margin: 0 8px 8px 0; } diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index e57ebb4d9b..49f5d121ca 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -842,16 +842,6 @@ GtkCalendar.header .button.titlebutton { .titlebar .stack-switcher > .titlebutton.button, GtkCalendar.header .stack-switcher > .titlebutton.button { padding: 5px 2px; } - .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage { - animation: needs_attention 150ms ease-in; - background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.76923)), to(transparent)); - background-size: 6px 6px, 6px 6px; - background-repeat: no-repeat; - background-position: right 3px, right 4px; } - .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop { - background-size: 6px 6px, 0 0; } - .stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) { - background-position: left 3px, left 4px; } .stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage { animation: none; background-image: none; } @@ -869,6 +859,17 @@ GtkCalendar.header .button.titlebutton { GtkCalendar.header .primary-toolbar .button.titlebutton { icon-shadow: none; } +.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage, .sidebar-item.needs-attention > GtkLabel { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.76923)), to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + background-position: right 3px, right 4px; } + .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop, .sidebar-item.needs-attention > GtkLabel:backdrop { + background-size: 6px 6px, 0 0; } + .stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl), .sidebar-item.needs-attention > GtkLabel:dir(rtl) { + background-position: left 3px, left 4px; } + .inline-toolbar GtkToolButton > .button, .inline-toolbar .header-bar GtkToolButton > .button.titlebutton, .header-bar .inline-toolbar GtkToolButton > .button.titlebutton, .inline-toolbar .titlebar GtkToolButton > .button.titlebutton, .titlebar .inline-toolbar GtkToolButton > .button.titlebutton, @@ -4043,7 +4044,12 @@ GtkFileChooserDialog .dialog-action-box { background-color: #4a90d9; } .sidebar-item { - padding: 10px; } + padding: 10px 4px; } + .sidebar-item > GtkLabel { + padding-left: 6px; + padding-right: 6px; } + .sidebar-item.needs-attention > GtkLabel { + background-size: 6px 6px, 0 0; } GtkPaned { margin: 0 8px 8px 0; }