From c0767cd305f6a7547a4c87c18c61a52baebcafe2 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sat, 6 Dec 2014 15:29:35 +0530
Subject: [PATCH] Commit current progress

---
 gtk-3.0/scss/_button.scss   |   20 +-
 gtk-3.0/scss/_global.scss   |   10 +-
 gtk-3.0/scss/_progress.scss |  205 +++++
 gtk-3.0/scss/widgets.scss   | 1438 +++++++++++++++++++++++++++++++++++
 4 files changed, 1666 insertions(+), 7 deletions(-)
 create mode 100644 gtk-3.0/scss/_progress.scss

diff --git a/gtk-3.0/scss/_button.scss b/gtk-3.0/scss/_button.scss
index 5546310..e548bc7 100755
--- a/gtk-3.0/scss/_button.scss
+++ b/gtk-3.0/scss/_button.scss
@@ -12,7 +12,7 @@
 	border-right-style: none;
 	border-left-style: none;
 	box-shadow: inset -1px 0 border_normal($bg),
-				0 1px 2px -1px alpha($dark_shadow, .3);
+				0 1px 2px -1px alpha($shadow, .3);
 
 	&:first-child {
 		border-width: 1px;
@@ -49,7 +49,7 @@
 
 	&:focus, &:hover {
 		box-shadow: inset -1px 0 border_focus($bg),
-					0 1px 2px -1px alpha($dark_shadow, .3);
+					0 1px 2px -1px alpha($shadow, .3);
 	}
 
 	&:active, &:active:hover,
@@ -121,12 +121,28 @@
 		box-shadow: none;
 	}
 
+	&.flat {
+		color: inherit;
+
+		&, &:hover, &:focus,
+		&:active, &:active:hover, &:active:focus,
+		&:checked, &:checked:hover, &:checked:focus {
+			border: none;
+			background-color: transparent;
+			background-image: none;
+		}
+
+		// TODO
+	}
+
 	&.separator, .separator {
 		color: shade($bg, .95);
 		border: 1px solid currentColor;
 
 		&:insensitive { color: shade($bg, .85); }
 	}
+
+	.linked & { @include linked_button($bg, $dark_shadow); }
 }
 
 .button {
diff --git a/gtk-3.0/scss/_global.scss b/gtk-3.0/scss/_global.scss
index d6f6cf7..f6bbff4 100755
--- a/gtk-3.0/scss/_global.scss
+++ b/gtk-3.0/scss/_global.scss
@@ -1,4 +1,4 @@
-/* default color scheme */
+// default color scheme
 $bg_color: #eee;
 $fg_color: #444;
 $base_color: #fff;
@@ -8,15 +8,15 @@ $selected_fg_color: #fff;
 $tooltip_bg_color: #444;
 $tooltip_fg_color: #eee;
 
-/* dark colors */
+// dark colors
 $dark_bg_color: #444;
 $dark_fg_color: #eee;
 
-/* shadows */
+// shadows
 $dark_shadow: #000;
 $light_shadow: #fff;
 
-/* misc colors used by gtk+ */
+// misc colors used by gtk+
 $info_fg_color: #3986ac;
 $info_bg_color: #d9edf7;
 $warning_fg_color: #c09853;
@@ -42,7 +42,7 @@ $menu_fg_color: $dark_fg_color;
 $menubar_bg_color: $dark_bg_color;
 $menubar_fg_color: $dark_fg_color;
 
-/* widget styles */
+// widget styles
 $roundness: 2px;
 $spacing: 5px;
 $gradient: 0;
diff --git a/gtk-3.0/scss/_progress.scss b/gtk-3.0/scss/_progress.scss
new file mode 100644
index 0000000..7f3ba02
--- /dev/null
+++ b/gtk-3.0/scss/_progress.scss
@@ -0,0 +1,205 @@
+@import "functions";
+@import "global";
+
+
+/*****************
+ ! Progress bars *
+******************/
+
+* {
+	-GtkProgressBar-min-horizontal-bar-height: 12;
+	-GtkProgressBar-min-vertical-bar-width: 12;
+}
+
+GtkProgressBar {
+	padding: 0;
+	border-radius: 2px;
+	font-size: smaller;
+	color: alpha($fg_color, 0.6);
+
+	&.osd {
+		-GtkProgressBar-xspacing: 0;
+		-GtkProgressBar-yspacing: 0;
+		-GtkProgressBar-min-horizontal-bar-height: 3;
+	}
+
+	&.trough {
+		border: 1px solid shade($bg_color, 0.8);
+		background-color: shade($bg_color, 1.08);
+		background-image: none;
+	}
+}
+
+.progressbar {
+	background-image: none;
+	background-color: $selected_bg_color;
+	border-radius: 0;
+	box-shadow: none;
+
+	&.left {
+		border-top-left-radius: $roundness;
+		border-bottom-left-radius: $roundness;
+	}
+
+	&.right {
+		border-top-right-radius: $roundness;
+		border-bottom-right-radius: $roundness;
+	}
+
+	&.left.right { box-shadow: none; }
+
+	&.vertical {
+		background-image: none;
+		background-color: $selected_bg_color;
+
+		&.bottom {
+			border-bottom-left-radius: $roundness;
+			border-bottom-right-radius: $roundness;
+		}
+
+		&.top {
+			border-top-left-radius: $roundness;
+			border-top-right-radius: $roundness;
+		}
+	}
+}
+
+GtkLevelBar {
+	-GtkLevelBar-min-block-width: 34;
+	-GtkLevelBar-min-block-height: 3;
+
+	&.vertical {
+		-GtkLevelBar-min-block-width: 3;
+		-GtkLevelBar-min-block-height: 34;
+	}
+}
+
+.level-bar {
+	&.trough {
+		border: 1px solid shade($bg_color, 0.8);
+		background-color: shade($bg_color, 1.08);
+		background-image: none;
+	}
+
+	&.fill-block {
+		// FIXME: it would be nice to set make fill blocks bigger, but we'd need
+		// :nth-child working on discrete indicators
+		border: 1px shade($selected_bg_color, 5%));
+		background-color: $selected_bg_color;
+		box-shadow: 0 1px transparentize(black, 0.9);
+		border-radius: 1px;
+		&:backdrop {
+			border-color: $selected_bg_color;
+			box-shadow: none;
+		}
+		&.indicator-discrete {
+			&.horizontal { margin: 0 1px; }
+			&.vertical { margin: 1px 0; }
+		}
+		&.level-high {
+			border-color: darken($success_color,10%);
+			background-color: $success_color;
+			&:backdrop { border-color: $success_color; }
+		}
+		&.level-low {
+			border-color: darken($warning_color,10%);
+			background-color: $warning_color;
+			&:backdrop { border-color: $warning_color; };
+		}
+		&.empty-fill-block {
+			background-color: transparent;
+			border-color: if($variant=='light', transparentize($fg_color,0.8),
+				transparentize($fg_color,0.9));
+			box-shadow: none;
+			&:backdrop { border-color: transparentize($backdrop_fg_color,0.85); }
+		}
+	}
+}
+
+.scale {
+	-GtkRange-slider-width: 16;
+	-GtkRange-trough-border: 1;
+	-GtkScale-slider-length: 16;
+
+	padding: 0;
+	border-width: 1px;
+	border-radius: 2px;
+	outline-offset: -1px;
+}
+
+.scale.slider {
+	border-radius: 8px;
+	background-color: shade($bg_color, 1.08);
+	background-image: none;
+	/* we will draw the border using box shadow for now */
+	box-shadow: inset 1px 0 shade($bg_color, 0.8),
+		inset 0 1px shade($bg_color, 0.8),
+		inset -1px 0 shade($bg_color, 0.8),
+		inset 0 -1px shade($bg_color, 0.8);
+}
+
+.scale.slider:hover {
+	box-shadow: inset 1px 0 shade($bg_color, 0.7),
+		inset 0 1px shade($bg_color, 0.7),
+		inset -1px 0 shade($bg_color, 0.7),
+		inset 0 -1px shade($bg_color, 0.7);
+}
+
+.scale.slider:insensitive {
+	background-color: shade($bg_color, 0.9);
+	background-image: none;
+	box-shadow: inset 1px 0 shade($bg_color, 0.85),
+		inset 0 1px shade($bg_color, 0.85),
+		inset -1px 0 shade($bg_color, 0.85),
+		inset 0 -1px shade($bg_color, 0.85);
+}
+
+.scale.slider.fine-tune:active,
+.scale.slider.fine-tune:active:hover,
+.scale.slider.fine-tune.horizontal:active,
+.scale.slider.fine-tune.horizontal:active:hover {
+	background-size: 50%;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+.scale.mark {
+	border-color: shade($bg_color, 0.8);
+}
+
+.scale.trough {
+	margin: 7px 0;
+	border-color: shade($bg_color, 0.8);
+	border-radius: 2px;
+	background-color: shade($bg_color, 1.08);
+	background-image: none;
+}
+
+.scale.trough.vertical {
+	margin: 0 7px;
+}
+
+.menuitem .scale.highlight.left,
+.scale.highlight.left {
+	border-color: $selected_bg_color;
+	background-color: $selected_bg_color;
+	background-image: none;
+}
+
+.menuitem .scale.highlight.left:hover {
+	border-color: shade($selected_bg_color, 0.8);
+	background-color: shade($selected_bg_color, 0.8);
+}
+
+.scale.highlight.bottom {
+	border-color: $selected_bg_color;
+	background-color: $selected_bg_color;
+	background-image: none;
+}
+
+.scale.trough:insensitive,
+.scale.highlight.left:insensitive {
+	border-color: shade($bg_color, 0.85);
+	background-color: shade($bg_color, 0.9);
+	background-image: none;
+}
diff --git a/gtk-3.0/scss/widgets.scss b/gtk-3.0/scss/widgets.scss
index a4912a2..882f861 100755
--- a/gtk-3.0/scss/widgets.scss
+++ b/gtk-3.0/scss/widgets.scss
@@ -1,3 +1,4 @@
+@import "functions";
 @import "colors";
 @import "base";
 @import "button";
@@ -8,4 +9,1441 @@
 @import "sidebar";
 @import "view";
 @import "grid";
+@import "progress";
+@import "spinner";
 @import "window";
+
+/***********
+* calendar *
+************/
+GtkCalendar {
+    padding: 4px;
+    outline-offset: -1px;
+}
+
+GtkCalendar:inconsistent {
+    color: mix($fg_color, $bg_color, 0.5);
+}
+
+GtkCalendar.view,
+GtkCalendar.header,
+GtkCalendar.button,
+GtkCalendar.button:hover,
+GtkCalendar.button:insensitive {
+    border-width: 0;
+    background-color: transparent;
+    background-image: none;
+}
+
+.highlight,
+GtkCalendar.highlight {
+    border-width: 0;
+    background-color: transparent;
+    color: $selected_bg_color;
+}
+
+/***********
+* infobar *
+***********/
+GtkInfoBar {
+    border-width: 0;
+    border-style: none;
+}
+
+.info {
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade($info_bg_color, 0.8);
+    background-color: $info_bg_color;
+    background-image: none;
+    color: $info_fg_color;
+}
+
+.info .button {
+    border-top-color: shade($info_bg_color, 0.8);
+    border-right-color: shade($info_bg_color, 0.72);
+    border-left-color: shade($info_bg_color, 0.72);
+    border-bottom-color: shade($info_bg_color, 0.7);
+    background-color: shade($info_bg_color, 1.08);
+    color: $info_fg_color;
+}
+
+.info .button:hover {
+    border-top-color: shade($info_bg_color, 0.85);
+    border-right-color: shade($info_bg_color, 0.78);
+    border-left-color: shade($info_bg_color, 0.78);
+    border-bottom-color: shade($info_bg_color, 0.7);
+    background-color: shade($info_bg_color, 1.10);
+}
+
+.info .button:active {
+    border-color: shade($info_bg_color, 0.6);
+    background-color: shade($info_bg_color, 0.95);
+}
+
+.info .button:active:hover {
+    border-top-color: shade($info_bg_color, 0.85);
+    border-right-color: shade($info_bg_color, 0.78);
+    border-left-color: shade($info_bg_color, 0.78);
+    border-bottom-color: shade($info_bg_color, 0.7);
+}
+
+.info .button.close {
+    color: $info_fg_color;
+}
+
+.info .button.close:hover {
+    background-color: alpha(white, 0.2);
+}
+
+.info .button.close:active {
+    color: $info_fg_color;
+    background-color: alpha(black, 0.1);
+}
+
+.warning {
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade($warning_bg_color, 0.8);
+    background-color: $warning_bg_color;
+    background-image: none;
+    color: $warning_fg_color;
+}
+
+.warning .button {
+    border-top-color: shade($warning_bg_color, 0.8);
+    border-right-color: shade($warning_bg_color, 0.72);
+    border-left-color: shade($warning_bg_color, 0.72);
+    border-bottom-color: shade($warning_bg_color, 0.7);
+    background-color: shade($warning_bg_color, 1.08);
+    color: $warning_fg_color;
+}
+
+.warning .button:hover {
+    border-top-color: shade($warning_bg_color, 0.85);
+    border-right-color: shade($warning_bg_color, 0.78);
+    border-left-color: shade($warning_bg_color, 0.78);
+    border-bottom-color: shade($warning_bg_color, 0.7);
+    background-color: shade($warning_bg_color, 1.10);
+}
+
+.warning .button:active {
+    border-color: shade($warning_bg_color, 0.6);
+    background-color: shade($warning_bg_color, 0.95);
+}
+
+.warning .button:active:hover {
+    border-top-color: shade($warning_bg_color, 0.85);
+    border-right-color: shade($warning_bg_color, 0.78);
+    border-left-color: shade($warning_bg_color, 0.78);
+    border-bottom-color: shade($warning_bg_color, 0.7);
+}
+
+.warning .button.close {
+    color: $warning_fg_color;
+}
+
+.warning .button.close:hover {
+    background-color: alpha(white, 0.2);
+}
+
+.warning .button.close:active {
+    color: $warning_fg_color;
+    background-color: alpha(black, 0.1);
+}
+
+.question {
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade($question_bg_color, 0.8);
+    background-color: $question_bg_color;
+    background-image: none;
+    color: $question_fg_color;
+}
+
+.question .button {
+    border-top-color: shade($question_bg_color, 0.8);
+    border-right-color: shade($question_bg_color, 0.72);
+    border-left-color: shade($question_bg_color, 0.72);
+    border-bottom-color: shade($question_bg_color, 0.7);
+    background-color: shade($question_bg_color, 1.08);
+    color: $question_fg_color;
+}
+
+.question .button:hover {
+    border-top-color: shade($question_bg_color, 0.85);
+    border-right-color: shade($question_bg_color, 0.78);
+    border-left-color: shade($question_bg_color, 0.78);
+    border-bottom-color: shade($question_bg_color, 0.7);
+    background-color: shade($question_bg_color, 1.10);
+}
+
+.question .button:active {
+    border-color: shade($question_bg_color, 0.6);
+    background-color: shade($question_bg_color, 0.95);
+}
+
+.question .button:active:hover {
+    border-top-color: shade($question_bg_color, 0.85);
+    border-right-color: shade($question_bg_color, 0.78);
+    border-left-color: shade($question_bg_color, 0.78);
+    border-bottom-color: shade($question_bg_color, 0.7);
+}
+
+.question .button.close {
+    color: $question_fg_color;
+}
+
+.question .button.close:hover {
+    background-color: alpha(white, 0.2);
+}
+
+.question .button.close:active {
+    color: $question_fg_color;
+    background-color: alpha(black, 0.1);
+}
+
+.error {
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade($error_bg_color, 0.8);
+    background-color: $error_bg_color;
+    background-image: none;
+    color: $error_fg_color;
+}
+
+.error .button {
+    border-top-color: shade($error_bg_color, 0.8);
+    border-right-color: shade($error_bg_color, 0.72);
+    border-left-color: shade($error_bg_color, 0.72);
+    border-bottom-color: shade($error_bg_color, 0.7);
+    background-color: shade($error_bg_color, 1.08);
+    color: $error_fg_color;
+}
+
+.error .button:hover {
+    border-top-color: shade($error_bg_color, 0.85);
+    border-right-color: shade($error_bg_color, 0.78);
+    border-left-color: shade($error_bg_color, 0.78);
+    border-bottom-color: shade($error_bg_color, 0.7);
+    background-color: shade($error_bg_color, 1.10);
+}
+
+.error .button:active {
+    border-color: shade($error_bg_color, 0.6);
+    background-color: shade($error_bg_color, 0.95);
+}
+
+.error .button:active:hover {
+    border-top-color: shade($error_bg_color, 0.85);
+    border-right-color: shade($error_bg_color, 0.78);
+    border-left-color: shade($error_bg_color, 0.78);
+    border-bottom-color: shade($error_bg_color, 0.7);
+}
+
+.error .button.close {
+    color: $error_fg_color;
+}
+
+.error .button.close:hover {
+    background-color: alpha(white, 0.2);
+}
+
+.error .button.close:active {
+    color: $error_fg_color;
+    background-color: alpha(black, 0.1);
+}
+
+/*****************
+* miscellaneous *
+*****************/
+.floating-bar {
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade($bg_color, 0.8);
+    border-radius: 2px;
+    background-color: $bg_color;
+    background-image: none;
+    color: $fg_color;
+}
+
+.floating-bar.top {
+    border-top-width: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+}
+
+.floating-bar.right {
+    border-right-width: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.floating-bar.bottom {
+    border-bottom-width: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.floating-bar.left {
+    border-left-width: 0;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+
+.floating-bar .button {
+    -GtkButton-image-spacing: 0;
+    -GtkButton-inner-border: 0;
+
+    border-style: none;
+    background-color: transparent;
+    background-image: none;
+}
+
+
+
+/************
+* notebook *
+************/
+.notebook {
+    padding: 0;
+    border-width: 1px 0 0 0;
+    border-style: solid;
+    border-color: shade($base_color, 0.7);
+    border-radius: 0;
+    background-color: $base_color;
+    background-image: none;
+    background-clip: border-box;
+
+    -GtkNotebook-initial-gap: 0;
+    -GtkNotebook-arrow-spacing: 5;
+    -GtkNotebook-tab-curvature: 0;
+    -GtkNotebook-tab-overlap: 1;
+    -GtkNotebook-has-tab-gap: false;
+}
+
+.notebook.frame {
+    border-width: 1px;
+}
+
+.notebook.header {
+    border-width: 0;
+    background-color: shade($base_color, 0.85);
+}
+
+.notebook.header.frame {
+    border-color: shade($base_color, 0.75);
+}
+
+.notebook.header.frame.top {
+    border-width: 1px 1px 0 1px;
+}
+
+.notebook.header.frame.right {
+    border-width: 1px 1px 1px 0;
+}
+
+.notebook.header.frame.bottom {
+    border-width: 0 1px 1px 1px;
+}
+
+.notebook.header.frame.left {
+    border-width: 1px 0 1px 1px;
+}
+
+.notebook GtkViewport {
+    border-width: 0;
+    background-color: $base_color;
+    color: $text_color;
+}
+
+.notebook tab {
+    padding: 4px 6px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: transparent;
+    background-color: transparent;
+    background-image: none;
+}
+
+.notebook tab:active {
+    background-color: transparent;
+    background-image: none;
+}
+
+.notebook tab.top {
+    border-bottom-width: 2px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.notebook tab.top:hover {
+    border-bottom-color: alpha($selected_bg_color, 0.3);
+}
+
+.notebook tab.top:active {
+    border-bottom-color: $selected_bg_color;
+}
+
+.notebook tab.right {
+    border-left-width: 2px;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+
+.notebook tab.right:hover {
+    border-left-color: alpha($selected_bg_color, 0.3);
+}
+
+.notebook tab.right:active {
+    border-left-color: $selected_bg_color;
+}
+
+.notebook tab.bottom {
+    border-top-width: 2px;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+}
+
+.notebook tab.bottom:hover {
+    border-top-color: alpha($selected_bg_color, 0.3);
+}
+
+.notebook tab.bottom:active {
+    border-top-color: $selected_bg_color;
+}
+
+.notebook tab.left {
+    border-right-width: 2px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.notebook tab.left:hover {
+    border-right-color: alpha($selected_bg_color, 0.3);
+}
+
+.notebook tab.left:active {
+    border-right-color: $selected_bg_color;
+}
+
+.notebook tab GtkLabel {
+    color: mix($text_color, $base_color, 0.3);
+}
+
+.notebook .prelight-page,
+.notebook .prelight-page GtkLabel {
+    color: mix($text_color, $base_color, 0.15);
+}
+
+.notebook .active-page,
+.notebook .active-page GtkLabel {
+    color: $text_color;
+}
+
+.notebook tab.reorderable-page:hover {
+    background-color: shade($base_color, 0.85);
+    border-left: 0;
+    border-right: 0;
+    /* using box shadows instead of borders due to slanted edges */
+    box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
+        inset 1px 0 shade($base_color, 0.7), inset -1px 0 shade($base_color, 0.7);
+}
+
+.notebook tab.reorderable-page:active {
+    background-color: shade($base_color, 0.90);
+    border-left: 0;
+    border-right: 0;
+    box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
+        inset 1px 0 shade($base_color, 0.75), inset -1px 0 shade($base_color, 0.75);
+}
+
+/* close button styling */
+.notebook tab .button,
+.notebook tab .button:active,
+.notebook tab .button:hover {
+    padding: 1px;
+    border-width: 1px;
+    border-radius: 2px;
+    border-style: solid;
+    border-color: transparent;
+    background-image: none;
+    background-color: transparent;
+    color: mix($text_color, $base_color, 0.5);
+}
+
+.notebook tab .button:hover {
+    color: $text_color;
+    border-color: shade($base_color, 0.8);
+}
+
+.notebook tab .button:active,
+.notebook tab .button:active:hover {
+    border-color: shade($base_color, 0.7);
+    background-color: shade($base_color, 0.95);
+}
+
+
+
+/*************
+* scrollbar *
+*************/
+.scrollbar {
+    border-width: 1px;
+    border-style: solid;
+    padding: 0;
+}
+
+.scrollbars-junction,
+.scrollbar.trough {
+    border-width: 0;
+    border-radius: 0;
+    background-color: $bg_color;
+    background-image: none;
+}
+
+.scrollbar.button,
+.scrollbar.button:active,
+.scrollbar.button:active:hover {
+    border-width: 0;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: none;
+    color: shade($bg_color, 0.6);
+}
+
+.scrollbar.slider {
+    border-width: 1px;
+    border-color: mix(shade($bg_color, 0.87), $fg_color, 0.21);
+    border-radius: 0;
+    background-color: mix($bg_color, $fg_color, 0.21);
+}
+
+.scrollbar.slider:hover,
+.scrollbar.slider.vertical:hover {
+    border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31);
+    background-color: mix($bg_color, $fg_color, 0.31);
+}
+
+.scrollbar.slider:active,
+.scrollbar.slider.vertical:active {
+    border-color: shade($selected_bg_color, 0.9);
+    background-color: $selected_bg_color;
+}
+
+.scrollbar.slider.fine-tune:prelight:active {
+    border-width: 2px;
+    border-color: transparent;
+}
+
+/* overlay scrollbar */
+OsThumb {
+    color: shade($bg_color, 0.7);
+}
+
+OsThumb:selected,
+OsScrollbar:selected {
+    background-color: $selected_bg_color;
+}
+
+OsThumb:active,
+OsScrollbar:active {
+    background-color: $selected_bg_color;
+}
+
+OsThumb:insensitive,
+OsScrollbar:insensitive {
+    background-color: shade($bg_color, 0.9);
+}
+
+/*************
+* separator *
+*************/
+.view.separator,
+.separator {
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade($bg_color, 0.9);
+    color: shade($bg_color, 0.9);
+}
+
+.button .separator,
+.button.separator {
+    border-color: shade($bg_color, 0.95);
+}
+
+.button .separator:insensitive,
+.button.separator:insensitive {
+    border-color: shade($bg_color, 0.85);
+}
+
+.primary-toolbar GtkSeparatorToolItem,
+.primary-toolbar .separator,
+.primary-toolbar .separator:insensitive,
+.toolbar GtkSeparatorToolItem,
+.toolbar .separator,
+.toolbar .separator:insensitive {
+    -GtkWidget-window-dragging: true;
+
+    border-color: shade($toolbar_bg_color, 0.95);
+    color: shade($toolbar_bg_color, 0.95);
+}
+
+.header-bar GtkSeparatorToolItem,
+.header-bar .separator,
+.header-bar .separator:insensitive,
+.titlebar GtkSeparatorToolItem,
+.titlebar .separator,
+.titlebar .separator:insensitive {
+    -GtkWidget-window-dragging: true;
+
+    border-color: shade($titlebar_bg_color, 0.95);
+    color: shade($titlebar_bg_color, 0.95);
+}
+
+.primary-toolbar .button .separator,
+.primary-toolbar .button.separator,
+.toolbar .button .separator,
+.toolbar .button.separator {
+    border-color: shade($toolbar_bg_color, 0.95);
+}
+
+.header-bar .button .separator,
+.header-bar .button.separator,
+.titlebar .button .separator,
+.titlebar .button.separator {
+    border-color: shade($titlebar_bg_color, 0.95);
+}
+
+.primary-toolbar .button .separator:insensitive,
+.primary-toolbar .button.separator:insensitive,
+.toolbar .button .separator:insensitive,
+.toolbar .button.separator:insensitive {
+    border-color: shade($toolbar_bg_color, 0.85);
+}
+
+.header-bar .button .separator:insensitive,
+.header-bar .button.separator:insensitive,
+.titlebar .button .separator:insensitive,
+.titlebar .button.separator:insensitive {
+    border-color: shade($titlebar_bg_color, 0.85);
+}
+
+.menuitem.separator {
+    -GtkMenuItem-horizontal-padding: 0;
+    -GtkWidget-separator-height: 1;
+
+    border-style: none;
+    color: shade($menu_bg_color, 0.9);
+}
+
+GtkComboBox .separator {
+    /* always disable separators */
+    -GtkWidget-wide-separators: true;
+    -GtkWidget-horizontal-separator: 0;
+    -GtkWidget-vertical-separator: 0;
+
+    border-style: none;
+}
+
+/**************
+* spinbutton *
+**************/
+.spinbutton .button {
+    color: mix($text_color, $base_color, 0.4);
+    padding: 2px 4px;
+    border-width: 0;
+    border-radius: 0;
+    border-style: none;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: inset 1px 0 shade($base_color, 0.9);
+}
+
+.spinbutton .button:insensitive {
+    color: mix($text_color, $base_color, 0.7);
+    box-shadow: inset 1px 0 shade($bg_color, 0.95);
+}
+
+.spinbutton .button:active,
+.spinbutton .button:hover {
+    color: $fg_color;
+}
+
+.spinbutton .button:first-child {
+    border-radius: 2px 0 0 2px;
+    box-shadow: none;
+}
+
+.spinbutton .button:last-child {
+    border-radius: 0 2px 2px 0;
+}
+
+.spinbutton .button:dir(rtl) {
+    box-shadow: inset -1px 0 shade($base_color, 0.9);
+}
+
+.spinbutton.vertical .button {
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade($bg_color, 0.8);
+    border-radius: 2px;
+    background-color: shade($bg_color, 1.08);
+    background-image: none;
+    color: $fg_color;
+    box-shadow: none;
+}
+
+.spinbutton.vertical .button:hover {
+    border-color: shade($bg_color, 0.7);
+    background-color: shade($bg_color, 1.10);
+    background-image: none;
+}
+
+.spinbutton.vertical .button:active {
+    border-color: shade($bg_color, 0.8);
+    background-color: shade($bg_color, 0.95);
+    background-image: none;
+}
+
+.spinbutton.vertical .button:active:hover {
+    border-color: shade($bg_color, 0.7);
+}
+
+.spinbutton.vertical .button:focus,
+.spinbutton.vertical .button:hover:focus,
+.spinbutton.vertical .button:active:focus,
+.spinbutton.vertical .button:active:hover:focus {
+    border-color: shade($bg_color, 0.7);
+}
+
+.spinbutton.vertical .button:insensitive {
+    border-color: shade($bg_color, 0.85);
+    background-color: shade($bg_color, 0.9);
+    background-image: none;
+}
+
+.spinbutton.vertical .button:first-child {
+    border-width: 1px;
+    border-bottom-width: 0;
+    border-radius: 2px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.spinbutton.vertical .button:last-child {
+    border-width: 1px;
+    border-top-width: 0;
+    border-radius: 2px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.spinbutton.vertical.entry {
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 0;
+}
+
+
+/*************
+* statusbar *
+*************/
+GtkStatusbar {
+    padding: 4px;
+    color: $fg_color;
+}
+
+/*****************
+* color chooser *
+*****************/
+GtkColorSwatch,
+GtkColorSwatch:selected {
+    border-width: 1px;
+    border-style: solid;
+    border-color: alpha(black, 0.1);
+    border-radius: 1px;
+    background-color: transparent;
+    background-clip: border-box;
+}
+
+GtkColorSwatch:hover,
+GtkColorSwatch:selected:hover {
+    border-color: alpha(black, 0.3);
+}
+
+GtkColorSwatch.color-dark:hover {
+}
+
+GtkColorSwatch.color-light:hover {
+}
+
+GtkColorSwatch.color-light:selected:hover,
+GtkColorSwatch.color-dark:selected:hover {
+    background-image: none;
+}
+
+GtkColorSwatch.left,
+GtkColorSwatch:first-child {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+}
+
+GtkColorSwatch.right,
+GtkColorSwatch:last-child {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+
+GtkColorSwatch:only-child {
+    border-radius: 2px;
+}
+
+GtkColorSwatch.top {
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+}
+
+GtkColorSwatch.bottom {
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+
+GtkColorChooserWidget #add-color-button {
+    background-clip: padding-box;
+    border-color: alpha(black, 0.1);
+    background-color: shade($bg_color, 0.95);
+    color: $fg_color;
+}
+
+GtkColorChooserWidget #add-color-button:hover {
+    border-color: alpha(black, 0.3);
+    background-color: shade($bg_color, 0.90);
+    color: $fg_color;
+}
+
+.color-active-badge,
+.color-active-badge:selected {
+    border-width: 1px;
+    border-style: solid;
+    border-width: 2px;
+    background-color: transparent;
+}
+
+.color-active-badge.color-light,
+.color-active-badge.color-light:hover {
+    border-color: alpha(black, 0.3);
+    color: alpha(black, 0.3);
+}
+
+.color-active-badge.color-dark,
+.color-active-badge.color-dark:hover {
+    border-color: alpha(white, 0.3);
+    color: alpha(white, 0.3);
+}
+
+GtkColorEditor GtkColorSwatch {
+    border-radius: 2px;
+}
+
+GtkColorEditor GtkColorSwatch.color-dark:hover,
+GtkColorEditor GtkColorSwatch.color-light:hover {
+    background-image: none;
+    border-color: alpha(black, 0.3);
+}
+
+GtkColorButton.button {
+    padding: 2px;
+}
+
+/***********
+* tooltip *
+***********/
+.tooltip {
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade($tooltip_bg_color, 0.8);
+    border-radius: 2px;
+    background-color: $tooltip_bg_color;
+    background-image: none;
+    color: $tooltip_fg_color;
+}
+
+.tooltip * {
+    background-color: transparent;
+}
+
+
+
+/**************
+* action-bar *
+**************/
+.action-bar {
+    padding: 4px;
+    border-width: 1px 0 0 0;
+    border-style: solid;
+    border-color: shade($bg_color, 0.8);
+    background-color: $bg_color;
+    background-image: none;
+    color: $fg_color;
+}
+
+.action-bar .button.text-button {
+    padding: 4px;
+}
+
+.action-bar .button.image-button {
+    padding: 6px;
+}
+
+.action-bar .title {
+    font: bold;
+    padding: 0 12px;
+}
+
+.action-bar .subtitle {
+    font: smaller;
+    padding: 0 12px;
+}
+
+/***************
+* search bars *
+***************/
+.search-bar {
+    border-width: 0 0 1px 0;
+    border-style: solid;
+    border-color: shade($bg_color, 0.8);
+    background-color: shade($bg_color, 0.98);
+}
+
+.search-bar .button.close-button {
+    padding: 4px;
+}
+
+/***********
+* dialogs *
+***********/
+GtkMessageDialog,
+.prompt {
+    -GtkDialog-content-area-border: 0;
+    -GtkDialog-action-area-border: 0;
+    -GtkDialog-button-spacing: 0;
+
+    margin: 0;
+    padding: 0;
+}
+
+/********************
+* various choosers *
+********************/
+GtkFontButton .separator,
+GtkFileChooserButton .separator {
+    /* always disable separators */
+    -GtkWidget-wide-separators: true;
+    -GtkWidget-horizontal-separator: 0;
+    -GtkWidget-vertical-separator: 0;
+}
+
+GtkFontButton GtkLabel:last-child {
+    color: alpha(currentColor, 0.7);
+}
+
+GtkFileChooserButton GtkImage:last-child {
+    color: alpha(currentColor, 0.7);
+}
+
+GtkFileChooser .pane-separator,
+GtkFileChooser .pane-separator:hover {
+    border-width: 0 1px 0 0;
+    border-style: solid;
+    border-color: shade($bg_color, 0.8);
+    background-color: $bg_color;
+    color: shade($bg_color, 0.9);
+}
+
+/* for fallback when header bar not used */
+GtkFileChooser .dialog-action-box {
+    border-width: 1px 0 0;
+    border-style: solid;
+    border-color: shade($bg_color, 0.7);
+}
+
+/*********************
+* app notifications *
+*********************/
+.app-notification {
+    border-style: solid;
+    border-color: shade($base_color, 0.8);
+    border-width: 0 1px 1px 1px;
+    border-radius: 0 0 2px 2px;
+    padding: 8px;
+    background-color: $base_color;
+    background-image: none;
+    color: $text_color;
+}
+
+/*******
+* osd *
+*******/
+//.background.osd {
+//    color: $osd_fg;
+//    background-color: $osd_bg;
+//}
+//
+//GtkOverlay.osd {
+//    background-color: transparent;
+//}
+//
+//.osd.frame {
+//    background-clip: border-box;
+//    background-origin: border-box;
+//}
+//
+//.osd.button,
+//.osd .button {
+//    padding: 4px;
+//    border-width: 1px;
+//    border-style: solid;
+//    border-color: shade($osd_bg, 0.8);
+//    border-radius: 2px;
+//    background-color: shade($osd_bg, 1.08);
+//    background-image: none;
+//    color: $osd_fg;
+//}
+//
+//.osd.button:prelight,
+//.osd.button:hover,
+//.osd .button:hover {
+//    border-color: shade($osd_bg, 0.7);
+//    background-color: shade($osd_bg, 1.10);
+//    background-image: none;
+//}
+//
+//.osd.button:active,
+//.osd .button:active,
+//.osd GtkMenuButton.button:active {
+//    border-color: shade($osd_bg, 0.8);
+//    background-color: shade($osd_bg, 0.95);
+//    background-image: none;
+//}
+//
+//.osd.button:active:hover,
+//.osd .button:active:hover,
+//.osd GtkMenuButton.button:active:hover {
+//    border-color: shade($osd_bg, 0.7);
+//}
+//
+//.osd.button:insensitive,
+//.osd .button:insensitive {
+//    border-color: shade($osd_bg, 0.85);
+//    background-color: shade($osd_bg, 0.9);
+//    background-image: none;
+//}
+//
+//.osd.button:active *:insensitive,
+//.osd .button:active *:insensitive {
+//    background-color: shade($osd_bg, 0.80);
+//    background-image: none;
+//}
+//
+//.osd.toolbar {
+//    -GtkToolbar-button-relief: normal;
+//
+//    padding: 4px;
+//    border-width: 1px;
+//    border-style: solid;
+//    border-radius: 2px;
+//    border-color: shade($osd_bg, 0.8);
+//    background-color: $osd_bg;
+//    background-image: none;
+//    color: $osd_fg;
+//}
+//
+//.osd.toolbar .button {
+//    padding: 4px;
+//    border-width: 1px;
+//    border-style: solid;
+//    border-color: shade($osd_bg, 0.8);
+//    border-radius: 2px;
+//    background-color: shade($osd_bg, 1.08);
+//    background-image: none;
+//    color: $osd_fg;
+//}
+//
+//.osd.toolbar .button:hover {
+//    border-color: shade($osd_bg, 0.7);
+//    background-color: shade($osd_bg, 1.10);
+//    background-image: none;
+//}
+//
+//.osd.toolbar .button:active {
+//    border-color: shade($osd_bg, 0.8);
+//    background-color: shade($osd_bg, 0.95);
+//    background-image: none;
+//}
+//
+//.osd.toolbar .button:active:hover {
+//    border-color: shade($osd_bg, 0.7);
+//}
+//
+//.osd.toolbar .button:focus,
+//.osd.toolbar .button:hover:focus,
+//.osd.toolbar .button:active:focus,
+//.osd.toolbar .button:active:hover:focus {
+//    border-color: shade($osd_bg, 0.7);
+//}
+//
+//.osd.toolbar .button:insensitive {
+//    border-color: shade($osd_bg, 0.85);
+//    background-color: shade($osd_bg, 0.9);
+//    background-image: none;
+//}
+//
+//.osd.toolbar .button:active *:insensitive {
+//    border-color: shade($osd_bg, 0.75);
+//    background-color: shade($osd_bg, 0.80);
+//    background-image: none;
+//}
+//
+//.osd.toolbar .button:first-child {
+//    border-radius: 2px 0 0 2px;
+//    border-width: 1px 0 1px 1px;
+//    box-shadow: inset -1px 0 shade($osd_bg, 0.9);
+//}
+//
+//.osd.toolbar .button:last-child {
+//    box-shadow: none;
+//    border-radius: 0 2px 2px 0;
+//    border-width: 1px 1px 1px 0;
+//}
+//
+//.osd.toolbar .button:only-child,
+//.osd.toolbar GtkToolButton .button,
+//.osd.toolbar GtkToolButton:only-child .button,
+//.osd.toolbar GtkToolButton:last-child .button,
+//.osd.toolbar GtkToolButton:first-child .button {
+//    border-width: 1px;
+//    border-radius: 2px;
+//    border-style: solid;
+//}
+//
+//.osd.toolbar .separator {
+//    color: shade($osd_bg, 0.9);
+//}
+//
+///* used by gnome-settings-daemon's media-keys OSD */
+//.osd.trough {
+//    background-color: shade($osd_bg, 0.8);
+//}
+//
+//.osd.progressbar {
+//    background-color: $osd_fg;
+//}
+//
+//.osd .scale.slider {
+//    background-color: shade($osd_bg, 1.08);
+//    background-image: none;
+//    /* we will draw the border using box shadow for now */
+//    box-shadow: inset 1px 0 shade($osd_bg, 0.8),
+//        inset 0 1px shade($osd_bg, 0.8),
+//        inset -1px 0 shade($osd_bg, 0.8),
+//        inset 0 -1px shade($osd_bg, 0.8);
+//}
+//
+//.osd .scale.slider:hover {
+//    box-shadow: inset 1px 0 shade($osd_bg, 0.7),
+//        inset 0 1px shade($osd_bg, 0.7),
+//        inset -1px 0 shade($osd_bg, 0.7),
+//        inset 0 -1px shade($osd_bg, 0.7);
+//}
+//
+//.osd .scale.slider:insensitive {
+//    background-color: shade($osd_bg, 0.9);
+//    background-image: none;
+//    box-shadow: inset 1px 0 shade($osd_bg, 0.85),
+//        inset 0 1px shade($osd_bg, 0.85),
+//        inset -1px 0 shade($osd_bg, 0.85),
+//        inset 0 -1px shade($osd_bg, 0.85);
+//}
+//
+//.osd .scale.trough {
+//    border-color: shade($osd_bg, 0.8);
+//    background-color: shade($osd_bg, 1.08);
+//    background-image: none;
+//}
+//
+//.osd .scale.trough.highlight {
+//    border-color: $selected_bg_color;
+//    background-color: $selected_bg_color;
+//    background-image: none;
+//}
+//
+//.osd .scale.trough:insensitive,
+//.osd .scale.trough.highlight:insensitive {
+//    border-color: shade($osd_bg, 0.85);
+//    background-color: shade($osd_bg, 0.9);
+//    background-image: none;
+//}
+//
+//.osd GtkProgressBar,
+//GtkProgressBar.osd {
+//    -GtkProgressBar-xspacing: 0;
+//    -GtkProgressBar-yspacing: 2px;
+//    -GtkProgressBar-min-horizontal-bar-height: 2px;
+//
+//    padding: 0;
+//}
+//
+//.osd GtkProgressBar.trough,
+//GtkProgressBar.osd.trough {
+//    padding: 0;
+//    border-style: none;
+//    border-radius: 0;
+//    background-image: none;
+//    background-color: transparent;
+//}
+//
+//.osd GtkProgressBar.progressbar,
+//GtkProgressBar.osd.progressbar {
+//    border-style: none;
+//    border-radius: 0;
+//    background-color: $selected_bg_color;
+//    background-image: none;
+//}
+//
+//.osd .view,
+//.osd.view {
+//    background-color: $osd_base;
+//}
+//
+//.osd .scrollbar.trough {
+//    background-color: $osd_bg;
+//}
+//
+//.osd .scrollbar.slider {
+//    border-width: 1px;
+//    border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.21);
+//    border-radius: 0;
+//    background-color: mix($osd_base, $osd_fg, 0.21);
+//}
+//
+//.osd .scrollbar.slider:hover {
+//    border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.31);
+//    background-color: mix($osd_base, $osd_fg, 0.31);
+//}
+//
+//.osd .scrollbar.slider:active {
+//    border-color: shade($selected_bg_color, 0.9);
+//    background-color: $selected_bg_color;
+//}
+//
+//.osd GtkIconView.cell:selected,
+//.osd GtkIconView.cell:selected:focus {
+//    background-color: transparent;
+//    border-style: solid;
+//    border-radius: 2px;
+//    border-width: 3px;
+//    border-color: $osd_fg;
+//    outline-color: transparent;
+//}
+//
+///* used by Documents */
+//.osd .page-thumbnail {
+//    border-style: solid;
+//    border-width: 1px;
+//    border-color: shade($osd_bg, 0.9);
+//    /* when there's no pixbuf yet */
+//    background-color: $osd_bg;
+//}
+
+/******************************
+* destructive action buttons *
+******************************/
+.destructive-action.button {
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade($error_color, 0.8);
+    border-radius: 2px;
+    background-color: $error_color;
+    background-image: none;
+    color: mix($selected_fg_color, $error_color, 0.1);
+}
+
+.destructive-action.button:hover {
+    border-color: shade($error_color, 0.7);
+    background-color: shade($error_color, 1.12);
+    background-image: none;
+}
+
+.destructive-action.button:active {
+    border-color: shade($error_color, 0.8);
+    background-color: shade($error_color, 0.87);
+    background-image: none;
+}
+
+.destructive-action.button:hover:active {
+    border-color: shade($error_color, 0.7);
+}
+
+/******************************
+* suggested action buttons *
+******************************/
+.suggested-action.button {
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade($selected_bg_color, 0.9);
+    border-radius: 2px;
+    background-color: shade($selected_bg_color, 1.18);
+    background-image: none;
+    color: mix($selected_fg_color, $selected_bg_color, 0.1);
+}
+
+.suggested-action.button:hover {
+    border-color: shade($selected_bg_color, 0.8);
+    background-color: shade($selected_bg_color, 1.20);
+    background-image: none;
+}
+
+.suggested-action.button:active {
+    border-color: shade($selected_bg_color, 0.9);
+    background-color: shade($selected_bg_color, 1.05);
+    background-image: none;
+}
+
+.suggested-action.button:hover:active {
+    border-color: shade($selected_bg_color, 0.8);
+}
+
+/******************
+* selection mode *
+******************/
+.selection-mode.header-bar,
+.selection-mode.toolbar {
+    border-style: solid;
+    border-color: $selected_bg_color;
+    background-color: shade($selected_bg_color, 1.6);
+    background-image: none;
+    color: $selected_bg_color;
+}
+
+.selection-mode.header-bar {
+    border-top-color: shade($selected_bg_color, 1.6);
+    border-bottom-color: $selected_bg_color;
+}
+
+.selection-mode.toolbar {
+    padding: 4px;
+}
+
+/* regular button */
+.selection-mode.header-bar .button,
+.selection-mode.toolbar .button,
+.selection-mode.toolbar GtkToolButton .button {
+    border-width: 1px;
+    border-style: solid;
+    border-color: $selected_bg_color;
+    border-radius: 2px;
+    background-color: shade($selected_bg_color, 1.68);
+    background-image: none;
+    color: shade($selected_bg_color, 0.8);
+}
+
+.selection-mode.header-bar .button:hover,
+.selection-mode.toolbar .button:hover,
+.selection-mode.toolbar GtkToolButton .button:hover {
+    border-color: shade($selected_bg_color, 0.9);
+    background-color: shade($selected_bg_color, 1.70);
+    background-image: none;
+}
+
+.selection-mode.header-bar .button:active,
+.selection-mode.toolbar .button:active,
+.selection-mode.toolbar GtkToolButton .button:active {
+    border-color: shade($selected_bg_color, 0.9);
+    background-color: shade($selected_bg_color, 1.55);
+    background-image: none;
+}
+
+.selection-mode.header-bar .button:hover:active,
+.selection-mode.toolbar .button:hover:active,
+.selection-mode.toolbar GtkToolButton .button:hover:active {
+    border-color: shade($selected_bg_color, 0.8);
+}
+
+/* suggested button */
+.selection-mode.header-bar .suggested-action.button,
+.selection-mode.toolbar .suggested-action.button,
+.selection-mode.toolbar GtkToolButton.suggested-action .button {
+    border-width: 1px;
+    border-style: solid;
+    border-color: shade($selected_bg_color, 0.9);
+    border-radius: 2px;
+    background-color: shade($selected_bg_color, 1.18);
+    background-image: none;
+    color: mix($selected_fg_color, $selected_bg_color, 0.1);
+}
+
+.selection-mode.header-bar .suggested-action.button:hover,
+.selection-mode.toolbar .suggested-action.button:hover,
+.selection-mode.toolbar GtkToolButton.suggested-action .button:hover {
+    border-color: shade($selected_bg_color, 0.8);
+    background-color: shade($selected_bg_color, 1.20);
+    background-image: none;
+}
+
+.selection-mode.header-bar .suggested-action.button:active,
+.selection-mode.toolbar .suggested-action.button:active,
+.selection-mode.toolbar GtkToolButton.suggested-action:active {
+    border-color: shade($selected_bg_color, 0.9);
+    background-color: shade($selected_bg_color, 1.05);
+    background-image: none;
+}
+
+.selection-mode.header-bar .suggested-action.button:hover:active,
+.selection-mode.toolbar .suggested-action.button:hover:active,
+.selection-mode.toolbar GtkToolButton.suggested-action .button:hover:active {
+    border-color: shade($selected_bg_color, 0.8);
+}
+
+/* menu button */
+.selection-mode.header-bar .selection-menu.button,
+.selection-mode.toolbar .selection-menu.button {
+    border-style: none;
+    background-color: transparent;
+    background-image: none;
+    color: shade($selected_bg_color, 0.8);
+}
+
+.selection-mode.toolbar .dim-label,
+.selection-mode.toolbar .selection-menu.button .dim-label {
+    color: shade($selected_bg_color, 0.7);
+}
+
+.selection-mode.header-bar .selection-menu.button:hover,
+.selection-mode.toolbar .dim-label:hover,
+.selection-mode.toolbar .selection-menu.button:hover,
+.selection-mode.toolbar .selection-menu.button .dim-label:hover {
+    color: shade($selected_bg_color, 0.7);
+}
+
+.selection-mode.header-bar .selection-menu.button:active,
+.selection-mode.toolbar .selection-menu.button:active {
+    color: shade($selected_bg_color, 0.8);
+    box-shadow: none;
+}
+
+/*************************
+* touch text selections *
+*************************/
+GtkBubbleWindow {
+    border-radius: 2px;
+    background-clip: border-box;
+}
+
+GtkBubbleWindow.osd.background {
+    //    background-color: $osd_bg;
+}
+
+GtkBubbleWindow .toolbar {
+    background-color: transparent;
+}