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:
parent
2cd86139fa
commit
66cacaf725
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user