initial commit

25 files changed, 2765 insertions, 0 deletions

diff --git a/.themes/FlatColor/gtk-3.20/widgets/button.css b/.themes/FlatColor/gtk-3.20/widgets/button.css
new file mode 100644
index 0000000..e9a293b
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/button.css
@@ -0,0 +1,68 @@
+/**********
+ * button *
+ **********/
+button {
+    padding: 4px 4px;
+    margin: 2px;
+    border-width: 2px;
+    border-style: solid;
+    border-color: @button_normal_color;
+    border-radius: 5px;
+    background-color: @button_normal_color;
+    color: @text_color;
+    background-repeat: no-repeat;
+    background-position: center;
+    box-shadow: 0 2.5px 4.5px @shadow;
+}
+
+button:focus {
+    color: @fg_color;
+    box-shadow: 0 2.5px 4.5px @shadow ,
+        inset 0 0 0 2px alpha(@selected_bg_color, 0.5);
+}
+
+button:active,
+button.toggle:checked {
+    color: @fg_color;
+    background-color: shade(@selected_bg_color, 0.83);
+    border-color: shade(@selected_bg_color, 0.83);
+    /*box-shadow: 0 1px 1px @shadow ,
+        inset 0 0 0 2px alpha(@fg_color, 0.25);*/
+    box-shadow: 0 1px 1px @shadow;
+}
+
+button:hover {
+    box-shadow: 0 2.5px 4.5px @shadow ,
+        inset 0 0 0 2px @selected_bg_color;
+    transition: box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
+    color: @fg_color;
+}
+
+button:active:hover,
+button.toggle:checked:hover {
+    box-shadow: 0 2.5px 4.5px @shadow ,
+        inset 0 0 0 2px alpha(@fg_color, 0.5);
+    transition: box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
+    color: @fg_color;
+}
+
+button:disabled {
+    background-color: mix(@color8, @color0, 0.40);
+    background-image: none;
+    color: mix(@text_color, @color0, 0.40);
+}
+
+button:active:disabled {}
+
+GtkLinkButton.button,
+GtkLinkButton.button:focus,
+GtkLinkButton.button:hover,
+GtkLinkButton.button:active,
+GtkLinkButton.button:focus:active,
+GtkLinkButton.button:focus:hover {}
+
+button.radio:checked {
+    color: @fg_color;
+    background-color: shade(@selected_bg_color, 0.83);
+    border-color: shade(@selected_bg_color, 0.83);
+}
\ No newline at end of file
diff --git a/.themes/FlatColor/gtk-3.20/widgets/calendar.css b/.themes/FlatColor/gtk-3.20/widgets/calendar.css
new file mode 100644
index 0000000..6e09c93
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/calendar.css
@@ -0,0 +1,35 @@
+/************
+ * Calendar *
+ ***********/
+calendar {
+	padding: 1px;
+	border: 2px solid @bg_color;
+	border-radius: 4px;
+	color: @selected_fg_color;
+}
+
+calendar:disabled {
+	color: shade(@selected_fg_color, 0.8) ;
+}
+
+calendar:selected {
+	border-radius: 0px; 
+}
+
+calendar.header {
+	border: none;
+	background-color: @tooltip_bg_color;
+	border-radius: 3px; 
+}
+
+calendar:indeterminate {
+	color: alpha(currentColor, 0.4); 
+}
+
+calendar.highlight {
+	background-color: alpha(@selected_bg_color, 0.1);
+	color: @selected_fg_color;
+	font-weight: 100; 
+	border-radius: 3px; 
+	padding: 2px
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/cell-row.css b/.themes/FlatColor/gtk-3.20/widgets/cell-row.css
new file mode 100644
index 0000000..c763c25
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/cell-row.css
@@ -0,0 +1,25 @@
+/****************
+ * cell and row *
+ ****************/
+.cell {
+    border-width: 0;
+    border-radius: 0px;
+}
+
+.cell:selected,
+.cell:selected:focus {
+    background-color: @selected_bg_color;
+    color: @selected_fg_color;
+}
+
+row:selected,
+row:selected:hover,
+row:selected:focus {
+    border-width: 0;
+    border-style: none;
+    border-radius: 0;
+    background-color: @selected_bg_color;
+    background-image: none;
+    color: @selected_fg_color;
+
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/check-radio.css b/.themes/FlatColor/gtk-3.20/widgets/check-radio.css
new file mode 100644
index 0000000..ab651cc
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/check-radio.css
@@ -0,0 +1,116 @@
+/*************************
+ * Check and Radio items *
+ *************************/
+
+check,
+radio {
+    color: alpha(currentColor, 0.75);
+    background-color: @base_color;
+    margin-right: 5px;
+}
+
+check {
+    border-radius: 3px;
+}
+
+radio {
+    border-radius: 10px;
+}
+
+check:disabled,
+radio:disabled {
+    background-color: mix(@theme_bg_color, @theme_fg_color, 0.1);
+}
+
+check:hover,
+check:active,
+radio:hover,
+radio:active {
+    background-color: shade(@selected_bg_color, 0.5);
+}
+
+check:checked,
+check:checked:disabled,
+radio:checked,
+radio:checked:disabled {
+    background-color: shade(@selected_bg_color, 0.9);
+}
+
+check:checked,
+check:indeterminate,
+radio:checked,
+radio:indeterminate {
+    background-color: shade(@selected_bg_color, 0.9);
+    color: shade(@bg_color, 0.8);
+}
+
+check:checked:disabled,
+check:indeterminate:disabled,
+radio:checked:disabled,
+radio:indeterminate:disabled {
+    color: shade(@bg_color, 0.4);
+}
+
+check:only-child,
+radio:only-child {}
+
+menu menuitem check,
+menu menuitem radio {
+    transition: none;
+}
+
+menu menuitem check:not(:checked):not(:indeterminate):hover,
+menu menuitem radio:not(:checked):not(:indeterminate):hover {
+    color: alpha(currentColor, 0.75);
+}
+
+menu menuitem check,
+menu menuitem check:hover,
+menu menuitem check:disabled,
+menu menuitem radio,
+menu menuitem radio:hover,
+menu menuitem radio:disabled {
+    margin: 0;
+    padding: 0;
+}
+
+menu menuitem check:checked {
+    -gtk-icon-source: -gtk-scaled(url("../assets/check.png"));
+}
+
+check:checked {
+    -gtk-icon-source: -gtk-recolor(url("../assets/check.png"));
+}
+
+check:checked:disabled {
+    -gtk-icon-source: -gtk-recolor(url("../assets/check-disabled.png"));
+}
+
+radio:checked {
+    -gtk-icon-source: -gtk-recolor(url("../assets/bullet.png"));
+}
+
+radio:checked:disabled {
+    -gtk-icon-source: -gtk-recolor(url("../assets/bullet-disabled.png"));
+}
+
+check:indeterminate,
+check:indeterminate:checked,
+radio:indeterminate,
+radio:indeterminate:checked {
+    -gtk-icon-source: -gtk-recolor(url("../assets/dash.png"));
+}
+
+check:indeterminate:disabled,
+check:indeterminate:checked:disabled,
+radio:indeterminate:disabled,
+radio:indeterminate:checked:disabled {
+    -gtk-icon-source: -gtk-recolor(url("../assets/dash-disabled.png"));
+}
+
+menu menuitem check:not(:indeterminate):checked,
+menu menuitem radio:not(:indeterminate):checked,
+menu menuitem check:indeterminate:checked,
+menu menuitem radio:indeterminate:checked {
+    animation: none;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/chrome.css b/.themes/FlatColor/gtk-3.20/widgets/chrome.css
new file mode 100644
index 0000000..5bf2bdf
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/chrome.css
@@ -0,0 +1,16 @@
+entry.chromium {
+	color: @selected_fg_color;
+	background-color: @selected_bg_color;
+}
+
+menu.chromium {
+	background-color: @theme_bg_color;
+	color: @theme_fg_color;
+	border: none 0px;
+}
+
+window.background.chromium {
+	border: none 0px;
+    background-color: @selected_bg_color;
+	color: @theme_fg_color;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/color-chooser.css b/.themes/FlatColor/gtk-3.20/widgets/color-chooser.css
new file mode 100644
index 0000000..7c9c2b5
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/color-chooser.css
@@ -0,0 +1,114 @@
+/*****************
+ * color chooser *
+ *****************/
+GtkColorSwatch,
+GtkColorSwatch:selected {
+    border-width: 4px;
+    border-style: solid;
+    border-radius: 0;
+    border-color: @bg_color;
+    background-color: transparent;
+    transition: all 200ms ease-out;
+}
+
+GtkColorSwatch:hover,
+GtkColorSwatch:selected:hover {
+    border-width: 0;
+    border-radius: 0;
+    border-color: @bg_color;
+    transition: all 200ms ease-in;
+}
+
+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 {
+
+}
+
+GtkColorSwatch.right,
+GtkColorSwatch:last-child {
+
+}
+
+GtkColorSwatch:only-child {
+
+}
+
+GtkColorSwatch.top {
+
+}
+
+GtkColorSwatch.bottom {
+
+}
+
+GtkColorChooserWidget #add-color-button {
+    transition: all 100ms ease-out;
+    border-color: @entry_border_color;
+    border-width: 1px;
+    border-style: none;
+    border-radius: 0;
+    background-color: @base_color;
+    color: @text_color_disabled
+}
+
+GtkColorChooserWidget #add-color-button:hover {
+    transition: all 100ms ease-in;
+    border-color: @selected_bg_color;
+    border-width: 1px;
+    border-style: none;
+    border-radius: 0;
+    background-color: @base_color;
+    color: @fg_color;
+}
+
+.color-active-badge,
+.color-active-badge:selected {
+    border-width: 1px;
+    border-style: solid;
+    border-width: 0;
+    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-width: 4px;
+    border-style: solid;
+    border-radius: 0;
+    border-color: @bg_color;
+    background-color: transparent;
+    transition: all 200ms ease-out;
+}
+
+GtkColorEditor GtkColorSwatch.color-dark:hover,
+GtkColorEditor GtkColorSwatch.color-light:hover {
+    border-width: 0;
+    border-radius: 0;
+    border-color: @bg_color;
+    transition: all 200ms ease-in;
+}
+
+GtkColorButton.button {
+    padding: 6px;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/column-header.css b/.themes/FlatColor/gtk-3.20/widgets/column-header.css
new file mode 100644
index 0000000..d6d9488
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/column-header.css
@@ -0,0 +1,52 @@
+/*****************
+ * column-header *
+ *****************/
+column-header.button,
+column-header.button:active,
+column-header .button,
+column-header .button:active {
+    font-weight: bold;
+    border-width: 0;
+    border-radius: 0;
+}
+column-header.button,
+column-header.button:active,
+column-header.button:focus,
+column-header.button:active:focus,
+column-header .button,
+column-header .button:active,
+column-header .button:focus,
+column-header .button:active:focus {
+    box-shadow: none;
+    background-color: inherit;
+    background-image: none;
+}
+column-header.button:hover,
+column-header.button:active:hover,
+column-header.button:hover:focus,
+column-header.button:active:hover:focus,
+column-header .button:hover,
+column-header .button:active:hover,
+column-header .button:hover:focus,
+column-header .button:active:hover:focus {
+    box-shadow: none;
+    background-color: inherit;
+    background-image: none;
+}
+column-header:last-child.button,
+column-header:last-child .button {
+
+}
+column-header.button,
+column-header .button,
+column-header.button:focus,
+column-header .button:focus {
+    background-color: @tooltip_bg_color;
+    color: shade(@text_color, 1.1);
+}
+column-header.button:active,
+column-header .button:active,
+column-header.button:active:focus,
+column-header .button:active:focus {
+    background-color: @tooltip_bg_color;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/combobox.css b/.themes/FlatColor/gtk-3.20/widgets/combobox.css
new file mode 100644
index 0000000..2df153a
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/combobox.css
@@ -0,0 +1,47 @@
+/**************
+ * ComboBoxes *
+ **************/
+combobox arrow {
+    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+    min-height: 16px;
+    min-width: 16px;
+}
+
+combobox menu,
+combobox .menu {
+    padding: 2px 0;
+}
+
+combobox menu menuitem,
+combobox .menu menuitem {
+    min-height: 28px;
+    padding: 0 10px;
+}
+
+combobox menu menuitem:hover {
+    background-color: @selected_bg_color;
+}
+
+combobox:drop(active) {
+    box-shadow: none;
+}
+
+.linked:not(.vertical) > combobox:first-child > box > button.combo {
+    border-radius: 3px 0 0 3px;
+    margin-right: 1px;
+}
+
+.linked:not(.vertical) > combobox:last-child > box > button.combo {
+    border-radius: 0 3px 3px 0;
+    margin-left: 1px;
+}
+
+.linked:not(.vertical) > combobox:not(:first-child):not(:last-child) > box > button.combo {
+    border-radius: 0;
+    margin-left: 1px;
+    margin-right: 1px;
+}
+
+.linked:not(.vertical) > combobox > box > button.combo {
+	border-radius: 0;
+}
\ No newline at end of file
diff --git a/.themes/FlatColor/gtk-3.20/widgets/csd.css b/.themes/FlatColor/gtk-3.20/widgets/csd.css
new file mode 100644
index 0000000..0d1fd61
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/csd.css
@@ -0,0 +1,125 @@
+/*******
+ * CSD *
+ *******/
+.titlebar {
+    /* border-width: 5px; */
+    border-style: solid;
+    border-color: @tooltip_bg_color;
+/*    border-image: linear-gradient(to left,
+		shade(@selected_bg_color, 1.20) 25%,
+		shade(@selected_bg_color, 1.05) 25%,
+		shade(@selected_bg_color, 1.05) 50%,
+		shade(@selected_bg_color, 0.90) 50%,
+		shade(@selected_bg_color, 0.90) 75%,
+		shade(@selected_bg_color, 0.75) 75%) 5 0 0 0/ 5px 0 0 0;*/
+    background-image: none;
+    background-color: @tooltip_bg_color;
+    color: @fg_color;
+    text-shadow: none;
+}
+
+/* this is the default titlebar that is added by GTK
+ * when client-side decorations are in use and the application
+ * did not set a custom titlebar.
+ */
+.titlebar.default-decoration {
+    border: none;
+    box-shadow: none;
+}
+
+.titlebar .title {
+    font-weight: bold;
+}
+
+.titlebar {
+	padding: 3px;
+}
+
+.titlebar:backdrop {
+    background-image: none;
+    background-color: @bg_color;
+    color: mix(@fg_color, @bg_color, 0.4);
+    text-shadow: none;
+}
+
+.titlebutton {
+    padding: 4px;
+    border-style: none;
+    /*background-color: @button_normal_color;*/
+    color: mix(@fg_color, @bg_color, 0.1);
+    -gtk-icon-shadow: none;
+}
+
+.titlebar .titlebutton:hover,
+.titlebar .titlebutton:hover:focus {
+    background-color: @selected_bg_color;
+    color: @selected_fg_color;
+    -gtk-icon-shadow: none;
+}
+
+.titlebar .titlebutton:active,
+.titlebar .titlebutton:active:hover {
+    background: none;
+    color: shade(@selected_bg_color, 0.9);
+    -gtk-icon-shadow: none;
+    box-shadow: none;
+}
+
+.titlebar .right .titlebutton:first-child {
+    background: none;
+}
+/*
+
+.titlebar .right .titlebutton:last-child {
+}
+
+.titlebar .left .titlebutton:last-child {
+    border-right: 1px solid shade(@toolbar_bg_color, 0.9);
+}
+
+.titlebar .left .titlebutton:first-child {
+}
+*/
+
+.titlebar .titlebutton:backdrop {
+    background-image: none;
+    color: mix(@fg_color, @bg_color, 0.4);
+    -gtk-icon-shadow: none;
+}
+
+.window-frame {
+    background-image: none;
+    border-width: 2px;
+    border-style: solid;
+    border-color: @bg_color;
+    border-image: none;
+    border-radius: 0;
+    box-shadow: 0 3px 12px 2px alpha(black, 0.5);
+
+    /* this is used for the resize cursor area */
+    margin: 10px;
+}
+
+.window-frame:backdrop {
+    border-width: 2px;
+    border-color: @bg_color;
+    border-image: none;
+    box-shadow: 0 2px 7px 1px alpha(black, 0.5);
+}
+
+GtkWindow {
+    color: @fg_color;
+    background-color: @bg_color;
+}
+
+GtkPaned {
+    background-color: @bg_color;
+}
+
+GtkEventBox {
+    background-color: @bg_color;
+}
+
+/*GtkSeparator separator .separator.vertical.titlebutton {
+    background-color: @selected_bg_color;
+}*/
diff --git a/.themes/FlatColor/gtk-3.20/widgets/entry.css b/.themes/FlatColor/gtk-3.20/widgets/entry.css
new file mode 100644
index 0000000..110dc16
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/entry.css
@@ -0,0 +1,44 @@
+/*********
+ * entry *
+ *********/
+entry {
+    padding: 6px 8px;
+    margin: 2px;
+    border-width: 2px;
+    border-style: solid;
+    border-color: @base_color;
+    border-radius: 3px;
+    background-color: @base_color;
+    background-image: none;
+    color: @text_color;
+    box-shadow: 0 2.5px 4.5px @shadow;
+}
+
+entry:active,
+entry:focus {
+    box-shadow: 0 1px 1px @shadow ,
+        inset 0 -2px @selected_bg_color;
+    transition: box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+entry:selected,
+entry:selected:focus,
+entry selection {
+    background-color: @selected_bg_color;
+    color: @selected_fg_color;
+}
+
+entry:disabled {
+    background-color: shade(@bg_color, 1.04);
+    border-color: shade(@bg_color, 1.04);
+    background-image: none;
+    color: @text_color_disabled
+}
+
+entry.progressbar {
+    border-width: 0;
+    border-radius: 0;
+    background-color: @selected_bg_color;
+    background-image: none;
+    color: @selected_fg_color;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/header-bar.css b/.themes/FlatColor/gtk-3.20/widgets/header-bar.css
new file mode 100644
index 0000000..cc1e2dc
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/header-bar.css
@@ -0,0 +1,47 @@
+/**************
+ * header-bar *
+ **************/
+
+headerbar {
+    padding: 4px;
+    border-width: 0;
+    border-style: none;
+    background-color: @bg_color;
+}
+
+headerbar title {
+    font-weight: bold;
+}
+
+headerbar subtitle {
+    font-size: smaller;
+}
+
+headerbar > stackswitcher > button {
+    margin-right: 1px;
+    border-radius: 0;
+}
+
+headerbar > stackswitcher > button:first-child {
+    border-radius: 3px 0 0 3px;
+}
+
+headerbar > stackswitcher > button:last-child {
+    border-radius: 0 3px 3px 0;
+}
+
+headerbar > stackswitcher > button.text-button {
+    padding: 4px 20px 4px 20px;
+}
+
+headerbar > stackswitcher > button.image-button {
+    padding: 6px 22px 6px 22px;
+}
+
+headerbar button.text-button {
+    padding: 4px;
+}
+
+headerbar button.image-button {
+    padding: 6px;
+}
\ No newline at end of file
diff --git a/.themes/FlatColor/gtk-3.20/widgets/infobar.css b/.themes/FlatColor/gtk-3.20/widgets/infobar.css
new file mode 100644
index 0000000..222768f
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/infobar.css
@@ -0,0 +1,90 @@
+/***********
+ * infobar *
+ ***********/
+GtkInfoBar {
+    border-width: 0;
+    border-style: none;
+}
+
+.info {
+    border-width: 0;
+    border-style: none;
+    background-color: @info_bg_color;
+    background-image: none;
+    color: @info_fg_color;
+}
+
+.warning {
+    border-width: 0;
+    border-style: none;
+    background-color: @warning_bg_color;
+    background-image: none;
+    color: @warning_fg_color;
+}
+
+.question {
+    border-width: 0;
+    border-style: none;
+    background-color: @question_bg_color;
+    background-image: none;
+    color: @question_fg_color;
+}
+
+.error {
+    border-width: 0;
+    border-style: none;
+    background-color: @error_bg_color;
+    background-image: none;
+    color: @error_fg_color;
+}
+
+.warning .button,
+.question .button,
+.info .button,
+.error .button,
+.warning .button.close,
+.question .button.close,
+.info .button.close,
+.error .button.close {
+
+}
+.warning .button:hover,
+.question .button:hover,
+.info .button:hover,
+.error .button:hover,
+.warning .button.close:hover,
+.question .button.close:hover,
+.info .button.close:hover,
+.error .button.close:hover {
+
+}
+.warning .button:active,
+.question .button:active,
+.info .button:active,
+.error .button:active,
+.warning .button.close:active,
+.question .button.close:active,
+.info .button.close:active,
+.error .button.close:active,
+.warning .button:active:hover,
+.question .button:active:hover,
+.info .button:active:hover,
+.error .button:active:hover,
+.warning .button.close:active:hover,
+.question .button.close:active:hover,
+.info .button.close:active:hover,
+.error .button.close:active:hover {
+
+}
+.warning .button:disabled,
+.question .button:disabled,
+.info .button:disabled,
+.error .button:disabled {
+
+}
+.warning .button *:disabled,
+.question .button *:disabled,
+.info .button *:disabled,
+.error .button *:disabled {
+
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/linked-buttons.css b/.themes/FlatColor/gtk-3.20/widgets/linked-buttons.css
new file mode 100644
index 0000000..f8ec1f6
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/linked-buttons.css
@@ -0,0 +1,524 @@
+/******************
+ * linked buttons *
+ *****************/
+
+
+
+/* set up shadows for visual separation */
+.linked .button,
+.inline-toolbar.toolbar .button,
+.inline-toolbar.toolbar GtkToolButton .button,
+.inline-toolbar.toolbar GtkToolButton > .button {
+    background-color: @base_color;
+    color: @text_color;
+
+}
+.linked .button:hover,
+.inline-toolbar.toolbar .button:hover,
+.inline-toolbar.toolbar GtkToolButton .button:hover,
+.inline-toolbar.toolbar GtkToolButton > .button:hover {
+    background-color: @base_color;
+    color: shade(@fg_color, 0.7);
+}
+.linked .button:active,
+.inline-toolbar.toolbar .button:active,
+.inline-toolbar.toolbar GtkToolButton .button:active,
+.inline-toolbar.toolbar GtkToolButton > .button:active {
+    background-color: @selected_bg_color;
+    color: @selected_fg_color;
+}
+.linked .button:active:hover,
+.inline-toolbar.toolbar .button:active:hover,
+.inline-toolbar.toolbar GtkToolButton .button:active:hover,
+.inline-toolbar.toolbar GtkToolButton > .button:active:hover {
+    background-color: shade(@selected_bg_color, 1.05);
+}
+.linked .button:insensitive,
+.inline-toolbar.toolbar .button:insensitive,
+.inline-toolbar.toolbar GtkToolButton .button:insensitive,
+.inline-toolbar.toolbar GtkToolButton > .button:insensitive {
+    background-color: shade(@bg_color, 1.04);
+    background-image: none;
+    color: @text_color_disabled
+}
+
+/* remove box shadow from last-child and only-child */
+
+.linked .entry:last-child,
+.linked .entry:only-child,
+.linked .button:last-child,
+.linked .button:only-child,
+.linked .button:insensitive:last-child,
+.linked .button:insensitive:only-child,
+.linked .button:active *:insensitive:last-child,
+.linked .button:active *:insensitive:only-child,
+.inline-toolbar.toolbar .button:last-child,
+.inline-toolbar.toolbar .button:only-child,
+.inline-toolbar.toolbar .button:insensitive:last-child,
+.inline-toolbar.toolbar .button:insensitive:only-child,
+.inline-toolbar.toolbar .button:active *:insensitive:last-child,
+.inline-toolbar.toolbar .button:active *:insensitive:only-child,
+.inline-toolbar.toolbar GtkToolButton:last-child > .button,
+.inline-toolbar.toolbar GtkToolButton:only-child > .button,
+.inline-toolbar.toolbar GtkToolButton:last-child > .button:insensitive,
+.inline-toolbar.toolbar GtkToolButton:only-child > .button:insensitive,
+.inline-toolbar.toolbar GtkToolButton:last-child > .button:active *:insensitive,
+.inline-toolbar.toolbar GtkToolButton:only-child > .button:active *:insensitive {
+
+}
+
+/* add back the inset shadow effect */
+.linked .button:active:last-child,
+.linked .button:active:only-child,
+.inline-toolbar.toolbar .button:active:last-child,
+.inline-toolbar.toolbar .button:active:only-child,
+.inline-toolbar.toolbar GtkToolButton:last-child > .button:active,
+.inline-toolbar.toolbar GtkToolButton:only-child > .button:active {
+
+}
+
+/* middle button */
+.linked .entry,
+.linked .button,
+.linked .button:active,
+.linked .button:active:hover,
+.linked .button:insensitive,
+.inline-toolbar.toolbar .button,
+.inline-toolbar.toolbar .button:active,
+.inline-toolbar.toolbar .button:insensitive,
+.inline-toolbar.toolbar GtkToolButton .button,
+.inline-toolbar.toolbar GtkToolButton .button:active,
+.inline-toolbar.toolbar GtkToolButton .button:insensitive {
+    border-width: 1px;
+    border-radius: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+
+/*leftmost button */
+.linked .entry:first-child,
+.linked .button:first-child,
+.linked .button:active:first-child,
+.linked .button:active:hover:first-child,
+.linked .button:insensitive:first-child,
+.inline-toolbar.toolbar .button:first-child,
+.inline-toolbar.toolbar .button:active:first-child,
+.inline-toolbar.toolbar .button:insensitive:first-child,
+.inline-toolbar.toolbar GtkToolButton:first-child .button,
+.inline-toolbar.toolbar GtkToolButton:first-child .button:active,
+.inline-toolbar.toolbar GtkToolButton:first-child .button:insensitive {
+
+}
+
+/* rightmost button */
+.linked .entry:last-child,
+.linked .button:last-child,
+.linked .button:active:last-child,
+.linked .button:active:hover:last-child,
+.linked .button:insensitive:last-child,
+.inline-toolbar.toolbar .button:last-child,
+.inline-toolbar.toolbar .button:active:last-child,
+.inline-toolbar.toolbar .button:insensitive:last-child,
+.inline-toolbar.toolbar GtkToolButton:last-child .button,
+.inline-toolbar.toolbar GtkToolButton:last-child .button:active,
+.inline-toolbar.toolbar GtkToolButton:last-child .button:insensitive {
+
+}
+
+/* linked single button */
+.linked .entry:only-child,
+.linked .button:only-child,
+.linked .button:active:only-child,
+.linked .button:active:hover:only-child,
+.linked .button:insensitive:only-child,
+.inline-toolbar.toolbar .button:only-child,
+.inline-toolbar.toolbar .button:active:only-child,
+.inline-toolbar.toolbar .button:insensitive:only-child,
+.inline-toolbar.toolbar GtkToolButton:only-child .button,
+.inline-toolbar.toolbar GtkToolButton:only-child .button:active,
+.inline-toolbar.toolbar GtkToolButton:only-child .button:insensitive {
+ border-width: 1px;
+    border-radius: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+
+/* linked button shadows (vertical) */
+.linked.vertical .button,
+.inline-toolbar.toolbar.vertical .button,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button {
+    background-color: @base_color;
+    color: @text_color;
+}
+
+.linked.vertical .button:active,
+.inline-toolbar.toolbar.vertical .button:active,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:active {
+    background-color: @selected_bg_color;
+    color: @selected_fg_color;
+}
+.linked.vertical .button:hover,
+.inline-toolbar.toolbar.vertical .button:hover,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:hover {
+    background-color: @base_color;
+    color: shade(@fg_color, 0.7);
+}
+.linked.vertical .button:active:hover,
+.inline-toolbar.toolbar.vertical .button:active:hover,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:active:hover {
+    background-color: shade(@selected_bg_color, 1.05);
+}
+.linked.vertical .button:insensitive,
+.inline-toolbar.toolbar.vertical .button:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:insensitive {
+    background-color: shade(@bg_color, 1.04);
+    background-image: none;
+    color: @text_color_disabled
+}
+
+/* remove box shadow from last-child and only-child */
+.linked.vertical .button:last-child,
+.linked.vertical .button:only-child,
+.linked.vertical .button:insensitive:last-child,
+.linked.vertical .button:insensitive:only-child,
+.linked.vertical .button:active *:insensitive:last-child,
+.linked.vertical .button:active *:insensitive:only-child,
+.inline-toolbar.toolbar.vertical .button:last-child,
+.inline-toolbar.toolbar.vertical .button:only-child,
+.inline-toolbar.toolbar.vertical .button:insensitive:last-child,
+.inline-toolbar.toolbar.vertical .button:insensitive:only-child,
+.inline-toolbar.toolbar.vertical .button:active *:insensitive:last-child,
+.inline-toolbar.toolbar.vertical .button:active *:insensitive:only-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:active *:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:active *:insensitive {
+
+}
+
+/* add back the inset shadow effect */
+.linked.vertical .button:active:last-child,
+.linked.vertical .button:active:only-child,
+.inline-toolbar.toolbar.vertical .button:active:last-child,
+.inline-toolbar.toolbar.vertical .button:active:only-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:active,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:active {
+
+}
+
+/* middle button (vertical) */
+.linked.vertical .entry,
+.linked.vertical .button,
+.linked.vertical .button:active,
+.linked.vertical .button:active:hover,
+.linked.vertical .button:insensitive {
+border-width: 1px;
+    border-radius: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+
+/* top button (vertical) */
+.linked.vertical .entry:first-child,
+.linked.vertical .button:first-child,
+.linked.vertical .button:active:first-child,
+.linked.vertical .button:active:hover:first-child,
+.linked.vertical .button:insensitive:first-child {
+
+
+}
+
+/* bottom button (vertical) */
+.linked.vertical .entry:last-child,
+.linked.vertical .button:last-child,
+.linked.vertical .button:active:last-child,
+.linked.vertical .button:active:hover:last-child,
+.linked.vertical .button:insensitive:last-child {
+
+}
+
+/* linked single button (vertical) */
+.linked.vertical .entry:only-child,
+.linked.vertical .button:only-child,
+.linked.vertical .button:active:only-child,
+.linked.vertical .button:active:hover:only-child,
+.linked.vertical .button:insensitive:only-child {
+    border-width: 1px;
+    border-radius: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+
+/* linked toolbar buttons */
+.primary-toolbar .linked .button,
+.primary-toolbar .button.raised.linked,
+.primary-toolbar .raised.linked .button,
+.toolbar .button.raised.linked,
+.toolbar .raised.linked .button,
+.toolbar .linked .button,
+.header-bar .button.raised.linked,
+.header-bar .raised.linked .button,
+.header-bar .linked .button {
+    background-color: @base_color;
+    color: @text_color;
+}
+.primary-toolbar .linked .button:hover,
+.primary-toolbar .button.raised.linked:hover,
+.primary-toolbar .raised.linked .button:hover,
+.toolbar .button.raised.linked:hover,
+.toolbar .raised.linked .button:hover,
+.toolbar .linked .button:hover,
+.header-bar .button.raised.linked:hover,
+.header-bar .raised.linked .button:hover,
+.header-bar .linked .button:hover {
+    background-color: @base_color;
+    color: shade(@fg_color, 0.7);
+}
+.primary-toolbar .linked .button:active,
+.primary-toolbar .button.raised.linked:active,
+.primary-toolbar .raised.linked .button:active,
+.toolbar .button.raised.linked:active,
+.toolbar .raised.linked .button:active,
+.toolbar .linked .button:active,
+.header-bar .button.raised.linked:active,
+.header-bar .raised.linked .button:active,
+.header-bar .linked .button:active {
+    background-color: shade(@bg_color, 1.1);
+    color: @fg_color;
+}
+.primary-toolbar .linked .button:active:hover,
+.primary-toolbar .button.raised.linked:active:hover,
+.primary-toolbar .raised.linked .button:active:hover,
+.toolbar .button.raised.linked:active:hover,
+.toolbar .raised.linked .button:active:hover,
+.toolbar .linked .button:active:hover,
+.header-bar .button.raised.linked:active:hover,
+.header-bar .raised.linked .button:active:hover,
+.header-bar .linked .button:active:hover {
+    background-color: shade(@bg_color, 1.1);
+}
+.primary-toolbar .linked .button:insensitive,
+.primary-toolbar .button.raised.linked:insensitive,
+.primary-toolbar .raised.linked .button:insensitive,
+.toolbar .button.raised.linked:insensitive,
+.toolbar .raised.linked .button:insensitive,
+.toolbar .linked .button:insensitive,
+.header-bar .button.raised.linked:insensitive,
+.header-bar .raised.linked .button:insensitive,
+.header-bar .linked .button:insensitive {
+    background-color: shade(@bg_color, 1.04);
+    background-image: none;
+    color: @text_color_disabled
+}
+
+/* remove box shadow from last-child and only-child */
+.primary-toolbar .linked .button:last-child,
+.primary-toolbar .linked .button:only-child,
+.primary-toolbar .button.raised.linked:last-child,
+.primary-toolbar .button.raised.linked:only-child,
+.primary-toolbar .linked .button:insensitive:last-child,
+.primary-toolbar .linked .button:insensitive:only-child,
+.primary-toolbar .button:insensitive.raised.linked:last-child,
+.primary-toolbar .button:insensitive.raised.linked:only-child,
+.primary-toolbar .linked .button:active *:insensitive:last-child,
+.primary-toolbar .linked .button:active *:insensitive:only-child,
+.primary-toolbar .button:active *:insensitive.raised.linked:last-child,
+.primary-toolbar .button:active *:insensitive.raised.linked:only-child,
+.primary-toolbar .raised.linked .button:last-child,
+.primary-toolbar .raised.linked .button:only-child,
+.primary-toolbar .raised.linked .button:insensitive:last-child,
+.primary-toolbar .raised.linked .button:insensitive:only-child,
+.primary-toolbar .raised.linked .button:active *:insensitive:last-child,
+.primary-toolbar .raised.linked .button:active *:insensitive:only-child,
+.toolbar .button.raised.linked:last-child,
+.toolbar .button.raised.linked:only-child,
+.toolbar .button:insensitive.raised.linked:last-child,
+.toolbar .button:insensitive.raised.linked:only-child,
+.toolbar .button:active *:insensitive.raised.linked:last-child,
+.toolbar .button:active *:insensitive.raised.linked:only-child,
+.toolbar .raised.linked .button:last-child,
+.toolbar .raised.linked .button:only-child,
+.toolbar .raised.linked .button:insensitive:last-child,
+.toolbar .raised.linked .button:insensitive:only-child,
+.toolbar .raised.linked .button:active *:insensitive:last-child,
+.toolbar .raised.linked .button:active *:insensitive:only-child,
+.toolbar .linked .button:last-child,
+.toolbar .linked .button:only-child,
+.toolbar .linked .button:insensitive:last-child,
+.toolbar .linked .button:insensitive:only-child,
+.toolbar .linked .button:active *:insensitive:last-child,
+.toolbar .linked .button:active *:insensitive:only-child,
+.header-bar .button.raised.linked:last-child,
+.header-bar .button.raised.linked:only-child,
+.header-bar .button:insensitive.raised.linked:last-child,
+.header-bar .button:insensitive.raised.linked:only-child,
+.header-bar .button:active *:insensitive.raised.linked:last-child,
+.header-bar .button:active *:insensitive.raised.linked:only-child,
+.header-bar .raised.linked .button:last-child,
+.header-bar .raised.linked .button:only-child,
+.header-bar .raised.linked .button:insensitive:last-child,
+.header-bar .raised.linked .button:insensitive:only-child,
+.header-bar .raised.linked .button:active *:insensitive:last-child,
+.header-bar .raised.linked .button:active *:insensitive:only-child,
+.header-bar .linked .button:last-child,
+.header-bar .linked .button:only-child,
+.header-bar .linked .button:insensitive:last-child,
+.header-bar .linked .button:insensitive:only-child,
+.header-bar .linked .button:active *:insensitive:last-child,
+.header-bar .linked .button:active *:insensitive:only-child {
+
+}
+
+/* add back the inset shadow effect */
+.primary-toolbar .linked .button:active:last-child,
+.primary-toolbar .linked .button:active:only-child,
+.primary-toolbar .button:active.raised.linked:last-child,
+.primary-toolbar .button:active.raised.linked:only-child,
+.primary-toolbar .raised.linked .button:active:last-child,
+.primary-toolbar .raised.linked .button:active:only-child,
+.toolbar .button:active.raised.linked:last-child,
+.toolbar .button:active.raised.linked:only-child,
+.toolbar .raised.linked .button:active:last-child,
+.toolbar .raised.linked .button:active:only-child,
+.toolbar .linked .button:active:last-child,
+.toolbar .linked .button:active:only-child,
+.header-bar .button:active.raised.linked:last-child,
+.header-bar .button:active.raised.linked:only-child,
+.header-bar .raised.linked .button:active:last-child,
+.header-bar .raised.linked .button:active:only-child,
+.header-bar .linked .button:active:last-child,
+.header-bar .linked .button:active:only-child {
+
+}
+
+/* middle button */
+.primary-toolbar .linked .button,
+.primary-toolbar .linked .button:active,
+.primary-toolbar .linked .button:insensitive,
+.primary-toolbar .button.raised.linked,
+.primary-toolbar .button.raised.linked:active,
+.primary-toolbar .button.raised.linked:insensitive,
+.primary-toolbar .raised.linked .button,
+.primary-toolbar .raised.linked .button:active,
+.primary-toolbar .raised.linked .button:insensitive,
+.toolbar .button.raised.linked,
+.toolbar .button.raised.linked:active,
+.toolbar .button.raised.linked:insensitive,
+.toolbar .raised.linked .button,
+.toolbar .raised.linked .button:active,
+.toolbar .raised.linked .button:insensitive,
+.toolbar .linked .button,
+.toolbar .linked .button:active,
+.toolbar .linked .button:insensitive,
+.header-bar .button.raised.linked,
+.header-bar .button.raised.linked:active,
+.header-bar .button.raised.linked:insensitive,
+.header-bar .raised.linked .button,
+.header-bar .raised.linked .button:active,
+.header-bar .raised.linked .button:insensitive,
+.header-bar .linked .button,
+.header-bar .linked .button:active,
+.header-bar .linked .button:insensitive {
+    border-width: 1px;
+    border-radius: 4px;
+    border-color: transparent;
+    border-style: solid;
+}
+
+/* leftmost button */
+.primary-toolbar .linked .button:first-child,
+.primary-toolbar .linked .button:active:first-child,
+.primary-toolbar .linked .button:insensitive:first-child,
+.primary-toolbar .button.raised.linked:first-child,
+.primary-toolbar .button.raised.linked:active:first-child,
+.primary-toolbar .button.raised.linked:insensitive:first-child,
+.primary-toolbar .raised.linked .button:first-child,
+.primary-toolbar .raised.linked .button:active:first-child,
+.primary-toolbar .raised.linked .button:insensitive:first-child,
+.toolbar .button.raised.linked:first-child,
+.toolbar .button.raised.linked:active:first-child,
+.toolbar .button.raised.linked:insensitive:first-child,
+.toolbar .raised.linked .button:first-child,
+.toolbar .raised.linked .button:active:first-child,
+.toolbar .raised.linked .button:insensitive:first-child,
+.toolbar .linked .button:first-child,
+.toolbar .linked .button:active:first-child,
+.toolbar .linked .button:insensitive:first-child,
+.header-bar .button.raised.linked:first-child,
+.header-bar .button.raised.linked:active:first-child,
+.header-bar .button.raised.linked:insensitive:first-child,
+.header-bar .raised.linked .button:first-child,
+.header-bar .raised.linked .button:active:first-child,
+.header-bar .raised.linked .button:insensitive:first-child,
+.header-bar .linked .button:first-child,
+.header-bar .linked .button:active:first-child,
+.header-bar .linked .button:insensitive:first-child {
+
+}
+
+/* rightmost button */
+.primary-toolbar .linked .button:last-child,
+.primary-toolbar .linked .button:active:last-child,
+.primary-toolbar .linked .button:insensitive:last-child,
+.primary-toolbar .button.raised.linked:last-child,
+.primary-toolbar .button.raised.linked:active:last-child,
+.primary-toolbar .button.raised.linked:insensitive:last-child,
+.primary-toolbar .raised.linked .button:last-child,
+.primary-toolbar .raised.linked .button:active:last-child,
+.primary-toolbar .raised.linked .button:insensitive:last-child,
+.toolbar .button.raised.linked:last-child,
+.toolbar .button.raised.linked:active:last-child,
+.toolbar .button.raised.linked:insensitive:last-child,
+.toolbar .raised.linked .button:last-child,
+.toolbar .raised.linked .button:active:last-child,
+.toolbar .raised.linked .button:insensitive:last-child,
+.toolbar .linked .button:last-child,
+.toolbar .linked .button:active:last-child,
+.toolbar .linked .button:insensitive:last-child,
+.header-bar .button.raised.linked:last-child,
+.header-bar .button.raised.linked:active:last-child,
+.header-bar .button.raised.linked:insensitive:last-child,
+.header-bar .raised.linked .button:last-child,
+.header-bar .raised.linked .button:active:last-child,
+.header-bar .raised.linked .button:insensitive:last-child,
+.header-bar .linked .button:last-child,
+.header-bar .linked .button:active:last-child,
+.header-bar .linked .button:insensitive:last-child {
+
+}
+
+/* linked single button */
+.primary-toolbar .linked .button:only-child,
+.primary-toolbar .linked .button:active:only-child,
+.primary-toolbar .linked .button:insensitive:only-child,
+.primary-toolbar .button.raised.linked:only-child,
+.primary-toolbar .button.raised.linked:active:only-child,
+.primary-toolbar .button.raised.linked:insensitive:only-child,
+.primary-toolbar .raised.linked .button:only-child,
+.primary-toolbar .raised.linked .button:active:only-child,
+.primary-toolbar .raised.linked .button:insensitive:only-child,
+.toolbar .button.raised.linked:only-child,
+.toolbar .button.raised.linked:active:only-child,
+.toolbar .button.raised.linked:insensitive:only-child,
+.toolbar .raised.linked .button:only-child,
+.toolbar .raised.linked .button:active:only-child,
+.toolbar .raised.linked .button:insensitive:only-child,
+.toolbar .linked .button:only-child,
+.toolbar .linked .button:active:only-child,
+.toolbar .linked .button:insensitive:only-child,
+.header-bar .button.raised.linked:only-child,
+.header-bar .button.raised.linked:active:only-child,
+.header-bar .button.raised.linked:insensitive:only-child,
+.header-bar .raised.linked .button:only-child,
+.header-bar .raised.linked .button:active:only-child,
+.header-bar .raised.linked .button:insensitive:only-child,
+.header-bar .linked .button:only-child,
+.header-bar .linked .button:active:only-child,
+.header-bar .linked .button:insensitive:only-child {
+    border-width: 1px;
+    border-radius: 0;
+    border-color: transparent;
+    border-style: solid;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/menu.css b/.themes/FlatColor/gtk-3.20/widgets/menu.css
new file mode 100644
index 0000000..f87e846
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/menu.css
@@ -0,0 +1,127 @@
+/*********
+ * Menus *
+ *********/
+
+menubar,
+.menubar {
+    -GtkWidget-window-dragging: true;
+    padding: 2px;
+    background-color: @tooltip_bg_color;
+}
+menubar > menuitem,
+.menubar > menuitem {
+    transition: all 0.1s cubic-bezier(0, 0, 0.2, 1), color 0;
+    min-height: 8px;
+    padding: 2px 8px;
+    color: @selected_fg_color;
+}
+menubar > menuitem:hover,
+.menubar > menuitem:hover {
+    background-color: @selected_bg_color;
+    color: @selected_fg_color;
+}
+menubar > menuitem:disabled,
+.menubar > menuitem:disabled {
+    color: rgba(0, 0, 0, 0.24);
+}
+menu,
+.menu {
+    margin: 2px 0;
+    padding: 2px 0;
+    background-color: @tooltip_bg_color;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+.csd menu,
+.csd .menu {
+    border: none;
+    border-radius: 2px;
+}
+menu menuitem,
+.menu menuitem {
+    min-height: 10px;
+    min-width: 40px;
+    padding: 4px 4px;
+    font: initial;
+    text-shadow: none;
+}
+menu menuitem:hover,
+.menu menuitem:hover {
+    background-color: @selected_bg_color;
+    color: @selected_fg_color;
+}
+menu menuitem:disabled,
+.menu menuitem:disabled {
+    color: rgba(0, 0, 0, 0.32);
+}
+menu menuitem arrow,
+.menu menuitem arrow {
+    min-height: 16px;
+    min-width: 16px;
+}
+menu menuitem arrow:dir(ltr),
+.menu menuitem arrow:dir(ltr) {
+    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+    margin-left: 8px;
+}
+menu menuitem arrow:dir(rtl),
+.menu menuitem arrow:dir(rtl) {
+    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
+    margin-right: 8px;
+}
+menu > arrow,
+.menu > arrow {
+    min-height: 16px;
+    min-width: 16px;
+    padding: 4px;
+    border-radius: 0;
+    background-color: @tooltip_bg_color;
+    color: rgba(0, 0, 0, 0.6);
+}
+menu > arrow.top,
+.menu > arrow.top {
+    margin-top: -4px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
+}
+menu > arrow.bottom,
+.menu > arrow.bottom {
+    margin-bottom: -4px;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+menu > arrow:hover,
+.menu > arrow:hover {
+    background-image: image(alpha(currentColor, 0.15));
+    color: rgba(0, 0, 0, 0.8);
+}
+menu > arrow:disabled,
+.menu > arrow:disabled {
+    border-color: transparent;
+    background-color: transparent;
+    color: transparent;
+}
+/*menu separator,
+.menu separator {
+    margin: 2px 0;
+	border-top: 1px solid mix(@theme_bg_color, @theme_fg_color, 0.01);
+    background-color: mix(@theme_bg_color, @theme_fg_color, 0.1);
+}*/
+menuitem accelerator {
+    color: alpha(currentColor, 0.6);
+}
+
+menu menuitem check:dir(ltr),
+menu menuitem radio:dir(ltr) {
+	margin-right: 10px;
+    padding: 8px;
+}
+
+menu menuitem check:dir(rtl),
+menu menuitem radio:dir(rtl) {
+	margin-left: 10px;
+    padding: 8px;
+}
+
+csd.popup {
+    border-radius: 2px;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/notebook.css b/.themes/FlatColor/gtk-3.20/widgets/notebook.css
new file mode 100644
index 0000000..e04539d
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/notebook.css
@@ -0,0 +1,254 @@
+/*************
+ * Notebooks *
+ *************/
+
+notebook>header {
+    background-color: shade(@bg_color, 1.2);
+    background-clip: border-box;
+}
+
+notebook>header.top {
+    border-bottom-style: solid;
+    padding-top: 4px;
+    border-radius: 2px 2px 0 0;
+}
+
+notebook>header.top>tabs>tab:not(.reorderable-page) {
+    border-radius: 3px 3px 0 0;
+}
+
+notebook>header.top>tabs>tab:not(.reorderable-page):checked {
+    box-shadow: inset 0 -3px @selected_bg_color;
+}
+
+notebook>header.top>tabs>tab:not(.reorderable-page):hover {
+    box-shadow: inset 0 -3px @text_color_disabled;
+}
+
+notebook>header.bottom {
+    border-top-style: solid;
+    padding-bottom: 4px;
+    border-radius: 0 0 2px 2px;
+}
+
+notebook>header.bottom>tabs>tab:not(.reorderable-page) {
+    border-radius: 0 0 3px 3px;
+
+}
+
+notebook>header.bottom>tabs>tab:not(.reorderable-page):checked {
+    box-shadow: inset 0 3px @selected_bg_color;
+}
+
+notebook>header.bottom>tabs>tab:not(.reorderable-page):hover {
+    box-shadow: inset 0 3px @text_color_disabled;
+}
+
+notebook>header.left {
+    border-right-style: solid;
+    padding-left: 4px;
+    border-radius: 2px 0 0 2px;
+}
+
+notebook>header.left>tabs>tab:not(.reorderable-page) {
+    border-radius: 3px 0 0 3px;
+
+}
+
+notebook>header.left>tabs>tab:not(.reorderable-page):checked {
+    box-shadow: inset -3px 0 @selected_bg_color;
+}
+
+notebook>header.left>tabs>tab:not(.reorderable-page):hover {
+    box-shadow: inset -3px 0 @text_color_disabled;
+}
+
+notebook>header.right {
+    border-left-style: solid;
+    padding-right: 4px;
+    border-radius: 0 2px 2px 0;
+}
+
+notebook>header.right>tabs>tab:not(.reorderable-page) {
+    border-radius: 0 3px 3px 0;
+}
+
+notebook>header.right>tabs>tab:not(.reorderable-page):checked {
+    box-shadow: inset 3px 0 @selected_bg_color;
+}
+
+notebook>header.right>tabs>tab:not(.reorderable-page):hover {
+    box-shadow: inset 3px 0 @text_color_disabled;
+}
+
+notebook>header.top>tabs>arrow {
+    border-top-style: none;
+}
+
+notebook>header.bottom>tabs>arrow {
+    border-bottom-style: none;
+}
+
+notebook>header.top>tabs>arrow,
+notebook>header.bottom>tabs>arrow {
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+notebook>header.top>tabs>arrow.down,
+notebook>header.bottom>tabs>arrow.down {
+    margin-left: -8px;
+    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
+}
+
+notebook>header.top>tabs>arrow.up,
+notebook>header.bottom>tabs>arrow.up {
+    margin-right: -8px;
+    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+}
+
+notebook>header.left>tabs>arrow {
+    border-left-style: none;
+}
+
+notebook>header.right>tabs>arrow {
+    border-right-style: none;
+}
+
+notebook>header.left>tabs>arrow,
+notebook>header.right>tabs>arrow {
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+notebook>header.left>tabs>arrow.down,
+notebook>header.right>tabs>arrow.down {
+    margin-top: -8px;
+    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
+}
+
+notebook>header.left>tabs>arrow.up,
+notebook>header.right>tabs>arrow.up {
+    margin-bottom: -8px;
+    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+
+notebook>header>tabs>arrow {
+    min-height: 16px;
+    min-width: 16px;
+    border-radius: 0;
+}
+
+notebook>header tab {
+    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
+    min-height: 24px;
+    min-width: 24px;
+    padding: 6px 12px;
+    outline-offset: -6px;
+    border-width: 1px;
+    border-color: transparent;
+    color: @selected_fg_color;
+    font-weight: 500;
+}
+
+notebook>header tab:checked {
+    color: @selected_fg_color;
+}
+
+notebook>header tab:checked.reorderable-page {
+    border-color: @selected_bg_color;
+    background-color: @text_color_disabled;
+}
+
+notebook>header tab:disabled {
+    color: @text_color_disabled
+}
+
+notebook>header tab:hover {
+    color: @text_color_disabled
+}
+
+notebook>header tab:hover:disabled {
+    color: @text_color_disabled
+}
+
+/*notebook>header tab:hover:not(.reorderable-page) {
+    animation: ripple 0.6s ease-in-out;
+}*/
+
+notebook>header tab:hover.reorderable-page {
+    border-color: rgba(0, 0, 0, 0.1);
+    background-color: @text_color_disabled;
+}
+
+notebook>header tab button.flat {
+    min-width: 24px;
+    min-height: 24px;
+    padding: 0;
+}
+
+notebook>header tab button.flat:last-child {
+    margin-left: 6px;
+    margin-right: -6px;
+}
+
+notebook>header tab button.flat:first-child {
+    margin-left: -6px;
+    margin-right: 6px;
+}
+
+notebook>header.top tabs,
+notebook>header.bottom tabs {
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+notebook>header.top tabs:not(:only-child):first-child,
+notebook>header.bottom tabs:not(:only-child):first-child {
+    margin-left: 0;
+}
+
+notebook>header.top tabs:not(:only-child):last-child,
+notebook>header.bottom tabs:not(:only-child):last-child {
+    margin-right: 0;
+}
+
+notebook>header.top tabs tab.reorderable-page,
+notebook>header.bottom tabs tab.reorderable-page {
+    margin: 0 -1px;
+    border-style: none solid;
+}
+
+notebook>header.left tabs,
+notebook>header.right tabs {
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+entry.chrome {
+    background-color: blue;
+}
+
+notebook>header.left tabs:not(:only-child):first-child,
+notebook>header.right tabs:not(:only-child):first-child {
+    margin-top: 0;
+}
+
+notebook>header.left tabs:not(:only-child):last-child,
+notebook>header.right tabs:not(:only-child):last-child {
+    margin-bottom: 0;
+}
+
+notebook>header.left tabs tab.reorderable-page,
+notebook>header.right tabs tab.reorderable-page {
+    margin: -1px 0;
+    border-style: solid none;
+}
+
+notebook>stack:not(:only-child) {
+    background-color: @tooltip_bg_color;
+}
+
+notebook>stack {
+    background-color: @tooltip_bg_color;
+}
\ No newline at end of file
diff --git a/.themes/FlatColor/gtk-3.20/widgets/osd.css b/.themes/FlatColor/gtk-3.20/widgets/osd.css
new file mode 100644
index 0000000..46b63fb
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/osd.css
@@ -0,0 +1,203 @@
+/*******
+ * osd *
+ *******/
+
+.background.osd {
+    border-style: none;
+    border-width: 0;
+    color: @fg_color;
+    background-color: @bg_color;
+}
+
+GtkOverlay.osd {
+    border-style: none;
+    border-width: 0;
+    background-color: transparent;
+}
+
+.osd.frame {
+    border-style: none;
+    border-width: 0;
+    background-clip: border-box;
+    background-origin: border-box;
+}
+
+.osd.button,
+.osd .button {
+
+}
+
+.osd.button:hover,
+.osd.button:hover,
+.osd .button:hover {
+
+}
+
+.osd.button:active,
+.osd .button:active,
+.osd GtkMenuButton.button:active {
+
+}
+
+.osd.button:active:hover,
+.osd .button:active:hover,
+.osd GtkMenuButton.button:active:hover {
+
+}
+
+.osd.button:disabled,
+.osd .button:disabled {
+
+}
+
+.osd.button:active *:disabled,
+.osd .button:active *:disabled {
+
+}
+
+.osd.toolbar {
+    -GtkToolbar-button-relief: normal;
+
+    padding: 4px;
+    border-width: 0;
+    border-style: none;
+    border-radius: 0;
+    background-color: @bg_color;
+    background-image: none;
+    color: @fg_color;
+}
+
+.osd.toolbar .button {
+
+}
+
+.osd.toolbar .button:hover {
+
+}
+
+.osd.toolbar .button:active {
+
+}
+
+.osd.toolbar .button:active:hover {
+
+}
+
+.osd.toolbar .button:focus,
+.osd.toolbar .button:hover:focus,
+.osd.toolbar .button:active:focus,
+.osd.toolbar .button:active:hover:focus {
+
+}
+
+.osd.toolbar .button:disabled {
+
+}
+
+.osd.toolbar .button:active *:disabled {
+
+}
+
+.osd.toolbar .button:first-child {
+
+}
+
+.osd.toolbar .button:last-child {
+
+}
+
+.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 {
+
+}
+
+.osd.toolbar .separator {
+
+}
+
+/* used by gnome-settings-daemon's media-keys OSD */
+.osd.trough {
+
+}
+
+.osd.progressbar {
+
+}
+
+.osd .scale.slider {
+
+}
+
+.osd .scale.slider:hover {
+
+}
+
+.osd .scale.slider:disabled {
+
+}
+
+.osd .scale.trough {
+
+}
+
+.osd .scale.trough.highlight {
+
+}
+
+.osd .scale.trough:disabled,
+.osd .scale.trough.highlight:disabled {
+
+}
+
+
+.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 {
+
+}
+
+.osd .scrollbar.trough {
+
+}
+
+.osd .scrollbar.slider {
+
+}
+
+.osd .scrollbar.slider:hover {
+
+}
+
+.osd .scrollbar.slider:active {
+
+}
+
+.osd GtkIconView.cell:selected,
+.osd GtkIconView.cell:selected:focus {
+
+}
+
+/* used by Documents */
+.osd .page-thumbnail {
+
+
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/progress-scale.css b/.themes/FlatColor/gtk-3.20/widgets/progress-scale.css
new file mode 100644
index 0000000..78f02fd
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/progress-scale.css
@@ -0,0 +1,375 @@
+/*****************
+ * Progress bars *
+ *****************/
+
+progressbar {
+    color: @selected_fg_color;
+    font-size: smaller;
+}
+progressbar.horizontal trough,
+progressbar.horizontal progress {
+    min-height: 9px;
+}
+progressbar.vertical trough,
+progressbar.vertical progress {
+    min-width: 9px;
+}
+progressbar trough {
+    background-color: shade( @bg_color, 0.8);
+    border-radius: 10px;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+progressbar trough:disabled {
+    background-color: shade( @bg_color, 0.7);
+    color: rgba(0, 0, 0, 0.32);
+}
+progressbar progress {
+    background-color: @selected_bg_color;
+    border-radius: 10px;
+}
+/*************
+ * Level Bar *
+ *************/
+
+levelbar block {
+    min-width: 36px;
+    min-height: 4px;
+}
+levelbar.vertical block {
+    min-width: 4px;
+    min-height: 36px;
+}
+levelbar trough {
+    padding: 2px;
+    border-radius: 2px;
+    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
+    border-image: none;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    background-color: shade( @bg_color, 0.9);
+    color: shade(@bg_color, 0.8);
+}
+levelbar trough:disabled {
+    background-color: shade( @bg_color, 0.7);
+    color: rgba(0, 0, 0, 0.32);
+}
+levelbar.horizontal.discrete block {
+    margin: 0 1px;
+}
+levelbar.vertical.discrete block {
+    margin: 1px 0;
+}
+levelbar.horizontal.discrete trough {
+    padding: 2px 1px;
+}
+levelbar.vertical.discrete trough {
+    padding: 1px 2px;
+}
+levelbar block.low {
+    background-color: shade( @selected_bg_color, 0.5);
+}
+levelbar block.high {
+    background-color: shade( @selected_bg_color, 0.8);
+}
+levelbar block.full {
+    background-color: shade( @selected_bg_color, 1.0);
+}
+levelbar block.empty {
+    background-color: alpha(@selected_bg_color, 0.3);
+    color: rgba(0, 0, 0, 0.32);
+}
+/*scale*/
+
+scale {
+    min-height: 12px;
+    min-width: 12px;
+    padding: 12px;
+}
+scale * {
+    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
+}
+scale slider {
+    min-height: 24px;
+    min-width: 24px;
+    margin: -10px;
+}
+scale trough {
+    outline-offset: 2px;
+    border-radius: 10px;
+    background-color: alpha(@selected_bg_color, 0.3);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
+}
+scale trough:disabled {
+    color: rgba(0, 0, 0, 0.32);
+}
+scale highlight {
+    background-color: @selected_bg_color;
+    border-radius: 10px;
+}
+scale highlight:disabled {
+    background-color: transparent;
+}
+scale fill {
+    background-color: alpha(@selected_bg_color, 0.3);
+    border-radius: 10px;
+}
+scale fill:disabled {
+    background-color: transparent;
+}
+scale slider {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: calc(100% - 8px);
+}
+scale slider {
+    background-image: -gtk-scaled(url("../assets/slider-insensitive-dark.png"), url("../assets/slider-insensitive-dark@2.png"));
+}
+scale slider:disabled {
+    background-image: -gtk-scaled(url("../assets/slider-insensitive.png"), url("../assets/slider-insensitive@2.png"));
+}
+scale slider:hover {
+    background-size: calc(100% - 4px);
+}
+scale slider:active {
+    background-size: calc(100% - 2px);
+}
+scale.fine-tune slider {
+    background-size: calc(100% - 12px);
+}
+scale value {
+    color: alpha(@selected_fg_color, 0.6);
+}
+scale marks {
+    color: alpha(@selected_fg_color, 0.3);
+}
+scale marks.top {
+    margin-bottom: 8px;
+    margin-top: -16px;
+}
+scale marks.bottom {
+    margin-top: 8px;
+    margin-bottom: -16px;
+}
+scale marks.top {
+    margin-right: 8px;
+    margin-left: -16px;
+}
+scale marks.bottom {
+    margin-left: 8px;
+    margin-right: -16px;
+}
+scale.horizontal indicator {
+    min-height: 8px;
+    min-width: 1px;
+}
+scale.vertical indicator {
+    min-height: 1px;
+    min-width: 8px;
+}
+scale.color.horizontal slider,
+scale.horizontal contents:last-child:not(:only-child) > trough > slider {
+    min-height: 30px;
+    min-width: 24px;
+    margin-top: -16px;
+    background-position: center calc(100% - 4px);
+}
+scale.color.horizontal slider,
+scale.horizontal contents:last-child:not(:only-child) > trough > slider {
+    background-image: -gtk-scaled(url("../assets/slider-horz-scale-has-marks-above-insensitive-dark.png"), url("../assets/slider-horz-scale-has-marks-above-insensitive-dark@2.png"));
+}
+scale.color.horizontal slider:hover,
+scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
+    background-position: center calc(100% - 2px);
+}
+scale.color.horizontal slider:active,
+scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
+    background-position: center calc(100% - 0px);
+}
+scale.color.fine-tune.horizontal slider,
+scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    background-position: center calc(100% - 6px);
+}
+scale.color.horizontal slider,
+scale.horizontal contents:last-child:not(:only-child) > trough > slider {
+    min-height: 30px;
+    min-width: 24px;
+    margin-top: -16px;
+    background-position: center calc(100% - 4px);
+}
+scale.color.horizontal slider:disabled,
+scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
+    background-image: -gtk-scaled(url("../assets/slider-horz-scale-has-marks-above-insensitive-dark.png"), url("../assets/slider-horz-scale-has-marks-above-insensitive-dark@2.png"));
+}
+scale.color.horizontal slider:hover,
+scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
+    background-position: center calc(100% - 2px);
+}
+scale.color.horizontal slider:active,
+scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
+    background-position: center calc(100% - 0px);
+}
+scale.color.fine-tune.horizontal slider,
+scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    background-position: center calc(100% - 6px);
+}
+scale.horizontal contents:first-child:not(:only-child) > trough > slider {
+    min-height: 30px;
+    min-width: 24px;
+    margin-bottom: -16px;
+    background-position: center calc(4px);
+}
+scale.horizontal contents:first-child:not(:only-child) > trough > slider {
+    background-image: -gtk-scaled(url("../assets/slider-horz-scale-has-marks-below-insensitive-dark.png"), url("../assets/slider-horz-scale-has-marks-below-insensitive-dark@2.png"));
+}
+scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover {
+    background-position: center calc(2px);
+}
+scale.horizontal contents:first-child:not(:only-child) > trough > slider:active {
+    background-position: center calc(0px);
+}
+scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    background-position: center calc(6px);
+}
+scale.horizontal contents:first-child:not(:only-child) > trough > slider {
+    min-height: 30px;
+    min-width: 24px;
+    margin-bottom: -16px;
+    background-position: center calc(4px);
+}
+scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled {
+    background-image: -gtk-scaled(url("../assets/slider-horz-scale-has-marks-below-insensitive-dark.png"), url("../assets/slider-horz-scale-has-marks-below-insensitive-dark@2.png"));
+}
+scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover {
+    background-position: center calc(2px);
+}
+scale.horizontal contents:first-child:not(:only-child) > trough > slider:active {
+    background-position: center calc(0px);
+}
+scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    background-position: center calc(6px);
+}
+scale.color.vertical:dir(rtl) slider,
+scale.vertical contents:last-child:not(:only-child) > trough > slider {
+    min-height: 24px;
+    min-width: 30px;
+    margin-left: -16px;
+    background-position: calc(4px) center;
+}
+scale.color.vertical:dir(rtl) slider,
+scale.vertical contents:last-child:not(:only-child) > trough > slider {
+    background-image: -gtk-scaled(url("../assets/slider-vert-scale-has-marks-above-insensitive-dark.png"), url("../assets/slider-vert-scale-has-marks-above-insensitive-dark@2.png"));
+}
+scale.color.vertical:dir(rtl) slider:hover,
+scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
+    background-position: calc(2px) center;
+}
+scale.color.vertical:dir(rtl) slider:active,
+scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
+    background-position: calc(0px) center;
+}
+scale.color.fine-tune.vertical:dir(rtl) slider,
+scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    background-position: calc(6px) center;
+}
+scale.color.vertical:dir(rtl) slider,
+scale.vertical contents:last-child:not(:only-child) > trough > slider {
+    min-height: 24px;
+    min-width: 30px;
+    margin-left: -16px;
+    background-position: calc(4px) center;
+}
+scale.color.vertical:dir(rtl) slider:disabled,
+scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
+    background-image: -gtk-scaled(url("../assets/slider-vert-scale-has-marks-above-insensitive.png"), url("../assets/slider-vert-scale-has-marks-above-insensitive@2.png"));
+}
+scale.color.vertical:dir(rtl) slider:hover,
+scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
+    background-position: calc(2px) center;
+}
+scale.color.vertical:dir(rtl) slider:active,
+scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
+    background-position: calc(0px) center;
+}
+scale.color.fine-tune.vertical:dir(rtl) slider,
+scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    background-position: calc(6px) center;
+}
+scale.color.vertical:dir(ltr) slider,
+scale.vertical contents:first-child:not(:only-child) > trough > slider {
+    min-height: 24px;
+    min-width: 30px;
+    margin-right: -16px;
+    background-position: calc(100% - 4px) center;
+}
+scale.color.vertical:dir(ltr) slider,
+scale.vertical contents:first-child:not(:only-child) > trough > slider {
+    background-image: -gtk-scaled(url("../assets/slider-vert-scale-has-marks-below-insensitive.png"), url("../assets/slider-vert-scale-has-marks-below-insensitive@2.png"));
+}
+scale.color.vertical:dir(ltr) slider:hover,
+scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
+    background-position: calc(100% - 2px) center;
+}
+scale.color.vertical:dir(ltr) slider:active,
+scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
+    background-position: calc(100% - 0px) center;
+}
+scale.color.fine-tune.vertical:dir(ltr) slider,
+scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    background-position: calc(100% - 6px) center;
+}
+scale.color.vertical:dir(ltr) slider,
+scale.vertical contents:first-child:not(:only-child) > trough > slider {
+    min-height: 24px;
+    min-width: 30px;
+    margin-right: -16px;
+    background-position: calc(100% - 4px) center;
+}
+scale.color.vertical:dir(ltr) slider:disabled,
+scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
+    background-image: -gtk-scaled(url("../assets/slider-vert-scale-has-marks-below-insensitive.png"), url("../assets/slider-vert-scale-has-marks-below-insensitive@2.png"));
+}
+scale.color.vertical:dir(ltr) slider:hover,
+scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
+    background-position: calc(100% - 2px) center;
+}
+scale.color.vertical:dir(ltr) slider:active,
+scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
+    background-position: calc(100% - 0px) center;
+}
+scale.color.fine-tune.vertical:dir(ltr) slider,
+scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    background-position: calc(100% - 6px) center;
+}
+scale.color {
+    min-height: 0;
+    min-width: 0;
+}
+scale.color.horizontal {
+    padding: 0 0 12px 0;
+}
+scale.color.horizontal trough {
+    padding-bottom: 4px;
+}
+scale.color.horizontal slider {
+    margin-bottom: -14px;
+    margin-top: 0;
+}
+scale.color.vertical:dir(ltr) {
+    padding: 0 0 0 12px;
+}
+scale.color.vertical:dir(ltr) trough {
+    padding-left: 4px;
+}
+scale.color.vertical:dir(ltr) slider {
+    margin-left: -14px;
+    margin-right: 0;
+}
+scale.color.vertical:dir(rtl) {
+    padding: 0 12px 0 0;
+}
+scale.color.vertical:dir(rtl) trough {
+    padding-right: 4px;
+}
+scale.color.vertical:dir(rtl) slider {
+    margin-right: -14px;
+    margin-left: 0;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/scrollbar.css b/.themes/FlatColor/gtk-3.20/widgets/scrollbar.css
new file mode 100644
index 0000000..504867b
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/scrollbar.css
@@ -0,0 +1,118 @@
+/**************
+ * Scrollbars *
+ **************/
+
+scrollbar {
+    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
+    background-color: @tooltip_bg_color;
+    background-clip: padding-box;
+    border-radius: 3px;
+}
+* {
+    -GtkScrollbar-has-backward-stepper: false;
+    -GtkScrollbar-has-forward-stepper: false;
+}
+scrollbar.top {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+scrollbar.bottom {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+scrollbar.left {
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+scrollbar.right {
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+scrollbar slider {
+    /* transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, border-width 0; */
+    min-width: 4px;
+    min-height: 4px;
+    border: 4px solid transparent;
+    background-clip: padding-box;
+    background-color: shade( @selected_bg_color, 0.80);
+    border-radius: 10px;
+}
+scrollbar slider:hover {
+    background-color: shade( @selected_bg_color, 0.80);
+}
+scrollbar slider:active {
+    background-color: @selected_bg_color;
+}
+scrollbar slider:disabled {
+    background-color: shade( @selected_bg_color, 0.80);
+}
+scrollbar.fine-tune slider {
+    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, border-width 0, min-width 0, min-height 0;
+    min-width: 4px;
+    min-height: 4px;
+}
+scrollbar.fine-tune.horizontal slider {
+    margin: 2px 0;
+}
+scrollbar.fine-tune.vertical slider {
+    margin: 0 2px;
+}
+scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
+    border-color: transparent;
+    background-color: transparent;
+}
+scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
+    min-width: 4px;
+    min-height: 4px;
+    margin: 2px;
+    border: 2px solid @tooltip_bg_color;
+}
+scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
+    min-width: 4px;
+    min-height: 4px;
+    margin: 2px;
+    border: 2px solid @selected_bg_color;
+    border-radius: 100px;
+    background-color: @tooltip_bg_color;
+    background-clip: padding-box;
+    -gtk-icon-source: none;
+}
+scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled {
+    background-color: @tooltip_bg_color;
+}
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
+    min-width: 24px;
+}
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
+    min-width: 4px;
+}
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+    min-height: 24px;
+}
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
+    min-height: 8px;
+}
+scrollbar.overlay-indicator.dragging,
+scrollbar.overlay-indicator.hovering {
+    background-color: @tooltip_bg_color;
+}
+scrollbar.horizontal slider {
+    min-width: 24px;
+}
+scrollbar.vertical slider {
+    min-height: 24px;
+}
+scrollbar button {
+    min-width: 4px;
+    min-height: 16px;
+    padding: 0;
+    border-radius: 0;
+}
+scrollbar.vertical button.down {
+    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+scrollbar.vertical button.up {
+    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
+}
+scrollbar.horizontal button.down {
+    -gtk-icon-source: -gtk-icontheme("pan-right-symbolic");
+}
+scrollbar.horizontal button.up {
+    -gtk-icon-source: -gtk-icontheme("pan-left-symbolic");
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/selection-mode.css b/.themes/FlatColor/gtk-3.20/widgets/selection-mode.css
new file mode 100644
index 0000000..6000be2
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/selection-mode.css
@@ -0,0 +1,109 @@
+/******************
+ * selection mode *
+ ******************/
+.selection-mode.header-bar,
+.selection-mode.toolbar {
+    padding: 4px;
+    border-width: 0;
+    border-style: none;
+    background-color: @sel_color;
+    background-image: none;
+    color: @selected_fg_color;
+}
+
+.selection-mode.header-bar {
+
+}
+
+.selection-mode.toolbar {
+    padding: 4px;
+}
+
+/* regular button */
+.selection-mode.header-bar .button,
+.selection-mode.toolbar .button,
+.selection-mode.toolbar GtkToolButton .button {
+
+}
+
+.selection-mode.header-bar .button:hover,
+.selection-mode.toolbar .button:hover,
+.selection-mode.toolbar GtkToolButton .button:hover {
+
+}
+
+.selection-mode.header-bar .button:active,
+.selection-mode.toolbar .button:active,
+.selection-mode.toolbar GtkToolButton .button:active {
+
+}
+
+.selection-mode.header-bar .button:hover:active,
+.selection-mode.toolbar .button:hover:active,
+.selection-mode.toolbar GtkToolButton .button:hover:active {
+
+}
+
+/* suggested button */
+.selection-mode.header-bar .suggested-action.button,
+.selection-mode.toolbar .suggested-action.button,
+.selection-mode.toolbar GtkToolButton.suggested-action .button {
+    padding: 6px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+    background-color: @button_info_color;
+    background-image: none;
+    color: @selected_fg_color;
+}
+
+.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: transparent;
+    background-color: shade(@button_info_color, 1.06);
+    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: transparent;
+    background-color: shade(@button_info_color, 0.925);
+    background-image: none;
+    color: shade(@selected_fg_color, 0.95);
+}
+
+.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: transparent;
+}
+
+/* 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: @selected_fg_color;
+}
+
+.selection-mode.toolbar .dim-label,
+.selection-mode.toolbar .selection-menu.button .dim-label {
+    color: shade(@selected_fg_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: @selected_fg_color;
+}
+
+.selection-mode.header-bar .selection-menu.button:active,
+.selection-mode.toolbar .selection-menu.button:active {
+    color: shade(@selected_fg_color, 0.8);
+    box-shadow: none;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/separator.css b/.themes/FlatColor/gtk-3.20/widgets/separator.css
new file mode 100644
index 0000000..e831978
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/separator.css
@@ -0,0 +1,24 @@
+/*************
+ * separator *
+ *************/
+sidebar.view.separator,
+view.separator,
+separator {
+    border-width: 0;
+    border-style: none;
+    background-color: transparent;
+}
+separator:disabled {
+    background-color: transparent;
+}
+button separator,
+button.separator {
+    border-width: 0;
+    background-color: transparent;
+}
+
+button separator:disabled,
+button.separator:disabled {
+    background-color: transparent;
+    border-width: 0;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/sidebar.css b/.themes/FlatColor/gtk-3.20/widgets/sidebar.css
new file mode 100644
index 0000000..03d9be5
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/sidebar.css
@@ -0,0 +1,43 @@
+/***********
+ * Sidebar *
+ ***********/
+
+.sidebar {
+    border-style: none;
+    background-color: @tooltip_bg_color;
+}
+stacksidebar.sidebar:dir(ltr) list,
+stacksidebar.sidebar.left list,
+stacksidebar.sidebar.left:dir(rtl) list,
+.sidebar:dir(ltr),
+.sidebar.left,
+.sidebar.left:dir(rtl) {
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    border-left-style: none;
+    background-color: @tooltip_bg_color;
+}
+stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl),
+stacksidebar.sidebar.right list .sidebar:dir(rtl),
+.sidebar.right {
+    border-left: 1px solid rgba(0, 0, 0, 0.2);
+    border-right-style: none;
+}
+.sidebar list {
+    background-color: @tooltip_bg_color;
+}
+paned .sidebar.left,
+paned .sidebar.right,
+paned .sidebar.left:dir(rtl),
+paned .sidebar:dir(rtl),
+paned .sidebar:dir(ltr),
+paned .sidebar {
+    border-style: none;
+    background-color: @tooltip_bg_color;
+}
+stacksidebar row {
+    padding: 10px 5px;
+}
+stacksidebar row > label {
+    padding-left: 6px;
+    padding-right: 6px;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/spinbutton.css b/.themes/FlatColor/gtk-3.20/widgets/spinbutton.css
new file mode 100644
index 0000000..dc5d85a
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/spinbutton.css
@@ -0,0 +1,91 @@
+/**************
+ *spinbutton *
+ **************/
+spinbutton button {
+
+    color: @text_color_disabled;
+    padding: 2px 4px;
+    border-width: 2px;
+    border-color: transparent;
+    background-image: none;
+}
+
+spinbutton button:disabled {
+    color: mix(@text_color, @base_color, 0.55);
+}
+
+spinbutton button:active,
+spinbutton button:hover {
+    color: @fg_color;
+}
+
+spinbutton button:first-child {
+}
+
+spinbutton button:last-child {
+}
+
+spinbutton button:dir(rtl) {
+
+}
+
+spinbutton.vertical button {
+
+    border-width: 1px;
+    border-style: none;
+    color: @text_color_disabled;
+    background-image: none;
+    box-shadow: none;
+}
+
+spinbutton.vertical button:hover {
+    color: @fg_color;
+    background-image: none;
+}
+
+spinbutton.vertical button:active {
+    color: @fg_color;
+    background-image: none;
+}
+
+spinbutton.vertical button:active:hover {
+
+}
+
+spinbutton.vertical button:focus,
+spinbutton.vertical button:hover:focus,
+spinbutton.vertical button:active:focus,
+spinbutton.vertical button:active:hover:focus {
+
+}
+
+spinbutton.vertical button:disabled {
+    background-image: none;
+    color: @text_color_disabled;
+    background-image: none;
+}
+
+spinbutton.vertical button:first-child {
+    border-width: 1px 1px 0 1px;
+    border-bottom-width: 0;
+}
+
+spinbutton.vertical button:last-child {
+    border-width: 0 1px 1px 1px;
+    border-top-width: 0;
+}
+
+spinbutton.vertical.entry {
+    border-width: 0;
+    border-style: none;
+    border-top-color: @base_color;
+    border-bottom-color: @base_color;
+}
+spinbutton.vertical.entry:disabled {
+    border-top-color:  shade(@bg_color, 1.04);
+    border-bottom-color: shade(@bg_color, 1.04);
+}
+spinbutton.vertical.entry:active,
+spinbutton.vertical.entry:focus {
+    box-shadow: inset 4px 0 @selected_bg_color;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/spinner.css b/.themes/FlatColor/gtk-3.20/widgets/spinner.css
new file mode 100644
index 0000000..763036c
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/spinner.css
@@ -0,0 +1,16 @@
+
+/***********
+ * spinner *
+ ***********/
+
+
+@keyframes spinner {
+  to { -gtk-icon-transform: rotate(1turn); }
+}
+
+spinner {
+  background: none;
+  -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
+  color: @selected_bg_color;
+  animation: spinner 1s linear infinite;
+}
\ No newline at end of file
diff --git a/.themes/FlatColor/gtk-3.20/widgets/switch.css b/.themes/FlatColor/gtk-3.20/widgets/switch.css
new file mode 100644
index 0000000..5bf986a
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/switch.css
@@ -0,0 +1,63 @@
+/**********
+ * Switch *
+ **********/
+
+switch {
+    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
+    margin: 6px 0;
+    border: 4px solid transparent;
+    border-radius: 100px;
+    background-color: alpha(#000, 0.2);
+    background-clip: padding-box;
+    font-size: 0;
+}
+switch:disabled {
+    color: shade(@selected_bg_color, 0.8);
+    background-color: alpha(#000, 0.1);
+}
+
+switch image {
+    color: alpha(#000, 0.0);
+}
+
+switch:disabled image:disabled {
+    color: alpha(#000, 0.0);
+}
+
+switch:checked {
+    background-color: shade(@selected_bg_color, 0.7);
+}
+switch:checked:disabled {
+    background-color: rgba(68, 138, 255, 0.2);
+    color: rgba(0, 0, 0, 0.32);
+}
+switch slider {
+    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0;
+    border-image: none;
+    background-color: @selected_bg_color;
+    color: rgba(0, 0, 0, 0.8);
+    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0;
+    min-width: 24px;
+    min-height: 24px;
+    margin: -4px 0 -4px -4px;
+    -gtk-outline-radius: 100px;
+    border-radius: 400px;
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(transparent), to(transparent));
+}
+
+switch:hover slider {
+    border-image: none;
+}
+switch:disabled slider {
+    background-color: shade(@selected_bg_color, 0.7);
+    color: rgba(0, 0, 0, 0.32);
+}
+switch:checked slider {
+    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1), color 0, margin 0, background-image 0;
+    animation: needs_attention 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
+    margin: -4px -4px -4px 0;
+    color: @selected_fg_color;
+}
+switch:checked:disabled slider {
+    animation: none;
+}
diff --git a/.themes/FlatColor/gtk-3.20/widgets/toolbar.css b/.themes/FlatColor/gtk-3.20/widgets/toolbar.css
new file mode 100644
index 0000000..c31211f
--- /dev/null
+++ b/.themes/FlatColor/gtk-3.20/widgets/toolbar.css
@@ -0,0 +1,39 @@
+/***********
+ * toolbar *
+ ***********/
+toolbar {
+    padding: 4px;
+    border-style: none;
+    background-color: @tooltip_bg_color;
+    background-image: none;
+}
+
+toolbar button {
+    padding: 2px;
+}
+
+toolbar button.text-button {
+    padding: 2px 4px;
+}
+
+toolbar button.path-bar-button {
+	padding: 6px;
+}
+
+toolbar button.image-button {
+    padding: 2px;
+}
+
+toolbar:disabled {
+    background-color: @bg_color;
+}
+
+/* menubar toolbars */
+toolbar.menubar {
+    -GtkToolbar-button-relief: normal;
+}
+
+linked entry:active,
+linked entry:focus {
+    box-shadow: inset 4px 0 @selected_bg_color;
+}