[gtk+] HC: provide explicit treeview styling
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] HC: provide explicit treeview styling
- Date: Wed, 29 Jul 2015 15:32:53 +0000 (UTC)
commit 66cacaf725bf2030260cd311778813b05a92f3c0
Author: Jakub Steiner <jimmac gmail com>
Date: Wed Jul 29 13:24:11 2015 +0200
HC: provide explicit treeview styling
deals with some details like:
- DND stuff
- progressbar
- expanders
- separators
https://bugzilla.gnome.org/show_bug.cgi?id=752975
gtk/theme/HighContrast/_common.scss | 90 ++++++++++++++++++++++++++++++++++-
gtk/theme/HighContrast/gtk.css | 71 ++++++++++++++++++++++++++-
2 files changed, 158 insertions(+), 3 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 9d1494b..f3edd2e 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -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;
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 1c30a28..bf0ea9a 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -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;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]