[gtk+] HighContrast: GtkListBox fixes
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] HighContrast: GtkListBox fixes
- Date: Thu, 27 Aug 2015 09:09:47 +0000 (UTC)
commit f7d5d83dd01033ced59e7d5cc6f7c0a413815dfb
Author: Jakub Steiner <jimmac gmail com>
Date: Thu Aug 27 11:08:23 2015 +0200
HighContrast: GtkListBox fixes
Make flat buttons in list-rows work.
gtk/theme/HighContrast/_common.scss | 83 ++++++++--------------------
gtk/theme/HighContrast/gtk.css | 104 +++++------------------------------
2 files changed, 38 insertions(+), 149 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index f59b405..c5a6710 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -1927,6 +1927,7 @@ GtkScrolledWindow {
padding: 2px;
}
+
.list-row.activatable,
.list-row.activatable:backdrop,
.list-row.activatable:backdrop:active,
@@ -1942,76 +1943,40 @@ GtkScrolledWindow {
border-style: none; // I need no borders here
border-radius: 0; // and no rounded corners
box-shadow: none; // and no box-shadow
-
-}
-
-.list-row.activatable {
- @extend %undecorated_button;
- background-color: transparentize($base_color,1); // for the transition
- border-style: none; // I need no borders here
- border-radius: 0; // and no rounded corners
- box-shadow: none; // and no box-shadow
- &:hover {
- background-color: mix($fg_color, $base_color, 5%);
- }
- &:active {
- box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
- }
- &:selected {
- background-color: $selected_bg_color;
- &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
- &:hover {
- background-color: mix($fg_color, $selected_bg_color, 10%);
- }
- &:backdrop { background-color: $borders_color; }
- }
}
-.list-row:selected {
- @extend %selected_items;
- .button {
- @include button(normal, $edge:none);
- border-color: $selected_borders_color;
- &.flat {
- @include button(undecorated, $edge:none);
- color: $selected_fg_color;
- }
+.list-row {
+ &.activatable {
+ color: $fg_color;
&:hover {
- @include button(hover, $edge:none);
- border-color: $selected_borders_color;
+ background-color: mix($fg_color, $base_color, 5%);
}
- &:active, &:checked {
- @include button(active, $edge:none);
- border-color: $selected_borders_color;
+ &:active {
+ box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
}
- &:backdrop, &.flat:backdrop {
- @include button(backdrop, $edge:none);
- border-color: $selected_borders_color;
- &:active, &:checked {
- @include button(backdrop-active, $edge:none);
- border-color: $selected_borders_color;
+ &:selected {
+ @extend %selected_items;
+ background-color: $selected_bg_color;
+ color: $selected_fg_color;
+ &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+ &:hover {
+ background-color: mix($fg_color, $selected_bg_color, 10%);
}
- &:insensitive {
- @include button(backdrop-insensitive, $edge:none);
- border-color: $selected_borders_color;
- &:active, &:checked {
- @include button(backdrop-insensitive-active, $edge:none);
- border-color: $selected_borders_color;
- }
+ &:backdrop { background-color: $borders_color; }
+ .button.flat {
+ color: $selected_fg_color;
+ &:hover { color: $fg_color; }
+ &:active { color: $selected_fg_color; }
}
}
- &.flat:backdrop {
- @include button(undecorated);
- color: $backdrop_base_color;
- }
- &:insensitive {
- @include button(insensitive, $edge:none);
- border-color: $selected_borders_color;
- &:active, &:checked { @include button(insensitive-active, $edge:none); }
- }
+ }
+ .button.flat {
+ color: $fg_color;
+ &:active { color: $selected_fg_color; }
}
}
+
// transition
.list-row, .list-row.activatable {
transition: all 300ms $ease-out-quad;
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 6b8dc10..ffbd863 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -2066,11 +2066,11 @@ GtkLevelBar.vertical {
.level-bar.fill-block.empty-fill-block:backdrop {
border-color: rgba(0, 0, 0, 0.15); }
-.view:selected, GtkCalendar:selected, .view:selected:focus, GtkCalendar:focus:selected,
.view:selected:hover, GtkCalendar:hover:selected, .label:selected, .label:selected:focus,
.label:selected:hover, .label:backdrop:selected, .entry:selected, .entry:selected:focus,
.menuitem.button.flat:hover, .menuitem.button.flat:selected, .list-row:selected, .sidebar:selected,
GtkPlacesSidebar.sidebar .view:selected, GtkPlacesSidebar.sidebar GtkCalendar:selected {
+.view:selected, GtkCalendar:selected, .view:selected:focus, GtkCalendar:focus:selected,
.view:selected:hover, GtkCalendar:hover:selected, .label:selected, .label:selected:focus,
.label:selected:hover, .label:backdrop:selected, .entry:selected, .entry:selected:focus,
.menuitem.button.flat:hover, .menuitem.button.flat:selected, .list-row.activatable:selected,
.sidebar:selected, GtkPlacesSidebar.sidebar .view:selected, GtkPlacesSidebar.sidebar GtkCalendar:selected {
background-color: #000;
color: #fff;
outline-color: rgba(255, 255, 255, 0.3); }
- .view:backdrop:selected, GtkCalendar:backdrop:selected, GtkCalendar:backdrop:focus:selected,
GtkCalendar:backdrop:hover:selected, .label:backdrop:selected, .entry:backdrop:selected,
.menuitem.button.flat:backdrop:hover, .menuitem.button.flat:backdrop:selected, .list-row:backdrop:selected,
.sidebar:backdrop:selected, GtkPlacesSidebar.sidebar .view:backdrop:selected, GtkPlacesSidebar.sidebar
GtkCalendar:backdrop:selected {
+ .view:backdrop:selected, GtkCalendar:backdrop:selected, GtkCalendar:backdrop:focus:selected,
GtkCalendar:backdrop:hover:selected, .label:backdrop:selected, .entry:backdrop:selected,
.menuitem.button.flat:backdrop:hover, .menuitem.button.flat:backdrop:selected,
.list-row.activatable:backdrop:selected, .sidebar:backdrop:selected, GtkPlacesSidebar.sidebar
.view:backdrop:selected, GtkPlacesSidebar.sidebar GtkCalendar:backdrop:selected {
background-color: #7f7f7f;
color: #fff; }
@@ -2128,106 +2128,30 @@ GtkPlacesSidebar.sidebar .view .separator:backdrop {
box-shadow: none; }
.list-row.activatable {
- background-color: rgba(255, 255, 255, 0);
- border-style: none;
- border-radius: 0;
- box-shadow: none; }
+ color: #000; }
.list-row.activatable:hover {
background-color: #f2f2f2; }
.list-row.activatable:active {
box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
.list-row.activatable:selected {
- background-color: #000; }
+ background-color: #000;
+ color: #fff; }
.list-row.activatable:selected:active {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
.list-row.activatable:selected:hover {
background-color: black; }
.list-row.activatable:selected:backdrop {
background-color: #7f7f7f; }
-
-.list-row:selected .button {
- border-width: 2px;
- border-style: solid;
- color: #000;
- background-image: none;
- background-color: #fff;
- border-color: #7f7f7f;
- border-color: #000; }
- .list-row:selected .button.flat {
- border-width: 2px;
- border-style: solid;
- color: #fff; }
- .list-row:selected .button:hover {
- border-width: 2px;
- border-style: solid;
- color: #000;
- background-color: #fff;
- border-color: #7f7f7f;
- background-image: none;
- border-color: #000; }
- .list-row:selected .button:active, .list-row:selected .button:checked {
- border-width: 2px;
- border-style: solid;
- background-image: none;
- color: white;
- background-color: black;
- border-color: #7f7f7f;
- border-color: #000; }
- .list-row:selected .button:backdrop, .list-row:selected .button.flat:backdrop {
- border-width: 2px;
- border-style: solid;
- color: #000;
- background-color: #fff;
- border-color: #8b8b8b;
- background-image: none;
- text-shadow: none;
- icon-shadow: none;
- border-color: #000; }
- .list-row:selected .button:backdrop:active, .list-row:selected .button:backdrop:checked,
.list-row:selected .button.flat:backdrop:active, .list-row:selected .button.flat:backdrop:checked {
- border-width: 2px;
- border-style: solid;
- color: white;
- background-color: #8b8b8b;
- border-color: #8b8b8b;
- background-image: none;
- border-color: #000; }
- .list-row:selected .button:backdrop:insensitive, .list-row:selected .button.flat:backdrop:insensitive {
- border-width: 2px;
- border-style: solid;
- color: #7f7f7f;
- background-color: white;
- border-color: #8b8b8b;
- background-image: none;
- border-color: #000; }
- .list-row:selected .button:backdrop:insensitive:active, .list-row:selected
.button:backdrop:insensitive:checked, .list-row:selected .button.flat:backdrop:insensitive:active,
.list-row:selected .button.flat:backdrop:insensitive:checked {
- border-width: 2px;
- border-style: solid;
- color: #7f7f7f;
- border-color: #8b8b8b;
- background-image: none;
- background-color: whitesmoke;
- border-color: #000; }
- .list-row:selected .button.flat:backdrop {
- border-width: 2px;
- border-style: solid;
+ .list-row.activatable:selected .button.flat {
+ color: #fff; }
+ .list-row.activatable:selected .button.flat:hover {
+ color: #000; }
+ .list-row.activatable:selected .button.flat:active {
+ color: #fff; }
+.list-row .button.flat {
+ color: #000; }
+ .list-row .button.flat:active {
color: #fff; }
- .list-row:selected .button:insensitive {
- border-width: 2px;
- border-style: solid;
- color: #7f7f7f;
- background-color: white;
- border-color: #7f7f7f;
- background-image: none;
- text-shadow: none;
- icon-shadow: none;
- border-color: #000; }
- .list-row:selected .button:insensitive:active, .list-row:selected .button:insensitive:checked {
- border-width: 2px;
- border-style: solid;
- color: #7f7f7f;
- border-color: #7f7f7f;
- background-image: none;
- background-color: white; }
.list-row, .list-row.activatable {
transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]