callisto-debian/gtk3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HighContrast: GtkListBox fixes

Browse Source 
Make flat buttons in list-rows work.
This commit is contained in:
Jakub Steiner
2015-08-27 11:08:23 +02:00
parent 64147dd2a8
commit f7d5d83dd0
2 changed files with 38 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
gtk/theme/HighContrast/_common.scss
View File

@ -1927,6 +1927,7 @@ GtkScrolledWindow {
padding: 2px; padding: 2px;
} }
.list-row.activatable, .list-row.activatable,
.list-row.activatable:backdrop, .list-row.activatable:backdrop,
.list-row.activatable:backdrop:active, .list-row.activatable:backdrop:active,
@ -1942,76 +1943,40 @@ GtkScrolledWindow {
border-style: none; // I need no borders here border-style: none; // I need no borders here
border-radius: 0; // and no rounded corners border-radius: 0; // and no rounded corners
box-shadow: none; // and no box-shadow box-shadow: none; // and no box-shadow
} }
.list-row.activatable { .list-row {
@extend %undecorated_button; &.activatable {
background-color: transparentize($base_color,1); // for the transition color: $fg_color;
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 { &:hover {
background-color: mix($fg_color, $selected_bg_color, 10%); background-color: mix($fg_color, $base_color, 5%);
} }
&:backdrop { background-color: $borders_color; } &:active {
} box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
} }
&:selected {
.list-row:selected { @extend %selected_items;
@extend %selected_items; background-color: $selected_bg_color;
.button {
@include button(normal, $edge:none);
border-color: $selected_borders_color;
&.flat {
@include button(undecorated, $edge:none);
color: $selected_fg_color; color: $selected_fg_color;
} &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
&:hover { &:hover {
@include button(hover, $edge:none); background-color: mix($fg_color, $selected_bg_color, 10%);
border-color: $selected_borders_color;
}
&:active, &:checked {
@include button(active, $edge:none);
border-color: $selected_borders_color;
}
&: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;
} }
&:insensitive { &:backdrop { background-color: $borders_color; }
@include button(backdrop-insensitive, $edge:none); .button.flat {
border-color: $selected_borders_color; color: $selected_fg_color;
&:active, &:checked { &:hover { color: $fg_color; }
@include button(backdrop-insensitive-active, $edge:none); &:active { color: $selected_fg_color; }
border-color: $selected_borders_color;
}
} }
} }
&.flat:backdrop { }
@include button(undecorated); .button.flat {
color: $backdrop_base_color; color: $fg_color;
} &:active { color: $selected_fg_color; }
&:insensitive {
@include button(insensitive, $edge:none);
border-color: $selected_borders_color;
&:active, &:checked { @include button(insensitive-active, $edge:none); }
}
} }
} }
// transition // transition
.list-row, .list-row.activatable { .list-row, .list-row.activatable {
transition: all 300ms $ease-out-quad; transition: all 300ms $ease-out-quad;

104
gtk/theme/HighContrast/gtk.css
View File

@ -2066,11 +2066,11 @@ GtkLevelBar.vertical {
.level-bar.fill-block.empty-fill-block:backdrop { .level-bar.fill-block.empty-fill-block:backdrop {
border-color: rgba(0, 0, 0, 0.15); } 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; background-color: #000;
color: #fff; color: #fff;
outline-color: rgba(255, 255, 255, 0.3); } 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; background-color: #7f7f7f;
color: #fff; } color: #fff; }
@ -2128,106 +2128,30 @@ GtkPlacesSidebar.sidebar .view .separator:backdrop {
box-shadow: none; } box-shadow: none; }
.list-row.activatable { .list-row.activatable {
background-color: rgba(255, 255, 255, 0); color: #000; }
border-style: none;
border-radius: 0;
box-shadow: none; }
.list-row.activatable:hover { .list-row.activatable:hover {
background-color: #f2f2f2; } background-color: #f2f2f2; }
.list-row.activatable:active { .list-row.activatable:active {
box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
.list-row.activatable:selected { .list-row.activatable:selected {
background-color: #000; } background-color: #000;
color: #fff; }
.list-row.activatable:selected:active { .list-row.activatable:selected:active {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
.list-row.activatable:selected:hover { .list-row.activatable:selected:hover {
background-color: black; } background-color: black; }
.list-row.activatable:selected:backdrop { .list-row.activatable:selected:backdrop {
background-color: #7f7f7f; } background-color: #7f7f7f; }
.list-row.activatable:selected .button.flat {
.list-row:selected .button { color: #fff; }
border-width: 2px; .list-row.activatable:selected .button.flat:hover {
border-style: solid; color: #000; }
color: #000; .list-row.activatable:selected .button.flat:active {
background-image: none; color: #fff; }
background-color: #fff; .list-row .button.flat {
border-color: #7f7f7f; color: #000; }
border-color: #000; } .list-row .button.flat:active {
.list-row:selected .button.flat {
border-width: 2px;
border-style: solid;
color: #fff; } 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;
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 { .list-row, .list-row.activatable {
transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }