HC: provide explicit treeview styling

deals with some details like:

- DND stuff
- progressbar
- expanders
- separators

https://bugzilla.gnome.org/show_bug.cgi?id=752975
This commit is contained in:
Jakub Steiner 2015-07-29 13:24:11 +02:00
parent 2cd86139fa
commit 66cacaf725
2 changed files with 158 additions and 3 deletions

View File

@ -24,7 +24,6 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-GtkToolItemGroup-expander-size: 11;
-GtkExpander-expander-size: 16;
-GtkTreeView-expander-size: 11;
-GtkTreeView-horizontal-separator: 4;
@ -941,6 +940,95 @@ GtkComboBox {
/**************
* Tree Views *
**************/
GtkTreeView.view {
-GtkTreeView-grid-line-width: 1;
-GtkTreeView-grid-line-pattern: '';
-GtkTreeView-tree-line-width: 1;
-GtkTreeView-tree-line-pattern: '';
-GtkTreeView-expander-size: 16;
border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
border-top-color: $bg_color; // while this is the grid lines color, better then nothing
&.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props
&:selected { border-radius: 0; } // rest border radius in lists
&:selected, &:backdrop:selected {
border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
}
&:insensitive {
color: $insensitive_fg_color;
&:selected {
color: mix($selected_fg_color, $selected_bg_color, 40%);
&:backdrop { color: mix($selected_fg_color, $selected_bg_color, 50%); }
}
&:backdrop { color: insensitive_color; }
}
&.separator:backdrop {
color: transparentize(black, 0.9);
}
&:backdrop {
color: $backdrop_fg_color;
border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
border-top: $backdrop_bg_color;
}
&.dnd {
border-style: solid none;
border-width: 1px;
border-color: mix($fg_color, $selected_bg_color, 50%);
}
&.expander {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
color: mix($fg_color, $base_color, 70%);
&:hover { color: $fg_color; }
&:selected {
color: mix($selected_fg_color, $selected_bg_color, 70%);
&:hover { color: $selected_fg_color; }
&:backdrop { color: mix($selected_fg_color, $selected_bg_color, 70%); }
}
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
}
&.progressbar { // progress bar in treeviews
color: $base_color;
border: 1px solid $selected_borders_color;
border-radius: 4px;
background-color: $fg_color;
&:selected { color: $selected_bg_color; }
&:backdrop {
color: $selected_bg_color;
border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
background-color: $backdrop_base_color;
}
}
&.trough { // progress bar trough in treeviews
background-color: transparentize($fg_color,0.9);
border-radius: 4px;
&:selected {
background-color: transparentize($selected_fg_color, 0.7);
border-width: 1px 0;
border-style: solid;
border-color: $selected_bg_color;
}
}
}
column-header {
.button {
@extend %column_header_button;

View File

@ -43,7 +43,6 @@
-GtkScrolledWindow-scrollbars-within-bevel: 1;
-GtkToolItemGroup-expander-size: 11;
-GtkExpander-expander-size: 16;
-GtkTreeView-expander-size: 11;
-GtkTreeView-horizontal-separator: 4;
-GtkMenu-horizontal-padding: 0;
-GtkMenu-vertical-padding: 0;
@ -105,7 +104,7 @@
color: #000;
background-color: #fff; }
.rubberband {
.rubberband, GtkTreeView.view.rubberband {
border: 1px solid #000;
background-color: rgba(0, 0, 0, 0.2); }
@ -1182,6 +1181,74 @@ GtkComboBox {
/**************
* Tree Views *
**************/
GtkTreeView.view {
-GtkTreeView-grid-line-width: 1;
-GtkTreeView-grid-line-pattern: '';
-GtkTreeView-tree-line-width: 1;
-GtkTreeView-tree-line-pattern: '';
-GtkTreeView-expander-size: 16;
border-left-color: #7f7f7f;
border-top-color: #fff; }
GtkTreeView.view:selected {
border-radius: 0; }
GtkTreeView.view:selected, GtkTreeView.view:backdrop:selected {
border-left-color: #7f7f7f;
border-top-color: rgba(0, 0, 0, 0.1); }
GtkTreeView.view:insensitive {
color: #7f7f7f; }
GtkTreeView.view:insensitive:selected {
color: #666666; }
GtkTreeView.view:insensitive:selected:backdrop {
color: #7f7f7f; }
GtkTreeView.view:insensitive:backdrop {
color: insensitive_color; }
GtkTreeView.view.separator:backdrop {
color: rgba(0, 0, 0, 0.1); }
GtkTreeView.view:backdrop {
color: #000;
border-left-color: #7f7f7f;
border-top: #fff; }
GtkTreeView.view.dnd {
border-style: solid none;
border-width: 1px;
border-color: black; }
GtkTreeView.view.expander {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
color: #4c4c4c; }
GtkTreeView.view.expander:dir(rtl) {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
GtkTreeView.view.expander:hover {
color: #000; }
GtkTreeView.view.expander:selected {
color: #b2b2b2; }
GtkTreeView.view.expander:selected:hover {
color: #fff; }
GtkTreeView.view.expander:selected:backdrop {
color: #b2b2b2; }
GtkTreeView.view.expander:checked {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
GtkTreeView.view.expander:backdrop {
color: #4c4c4c; }
GtkTreeView.view.progressbar {
color: #fff;
border: 1px solid #000;
border-radius: 4px;
background-color: #000; }
GtkTreeView.view.progressbar:selected {
color: #000; }
GtkTreeView.view.progressbar:backdrop {
color: #000;
border-color: #000;
background-color: #fff; }
GtkTreeView.view.trough {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px; }
GtkTreeView.view.trough:selected {
background-color: rgba(255, 255, 255, 0.3);
border-width: 1px 0;
border-style: solid;
border-color: #000; }
column-header .button {
color: #7f7f7f;
font-weight: bold;