Improvement: GTK3&4 - notebook tab close button color

thekomer · Mar 16, 2022 · 8fde8fb · 8fde8fb
1 parent f30a97e
commit 8fde8fb
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 21 deletions.
diff --git a/gtk-3.0/apps/_chromium.scss b/gtk-3.0/apps/_chromium.scss
@@ -1,4 +1,4 @@
 .background.chromium {
-	color: $fg_color;
-	background-color: lighten($bg_color, 6%);
-}
+	color: transparentize($fg_color, 0.2);
+	background-color: mix($selected_bg_color, $headerbar_color, 50%);//ighten($bg_color, 8%);
+}
diff --git a/gtk-3.0/apps/_chromium.scss~ b/gtk-3.0/apps/_chromium.scss~
@@ -0,0 +1,4 @@
+.background.chromium {
+	color: $fg_color;
+	background-color: darken($theme_color, 20%); //lighten($bg_color, 6%);
+}
diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css
@@ -3360,6 +3360,7 @@ notebook > header {
         border-color: rgba(59, 62, 71, 0.145);
         background-color: #15192b; }
     notebook > header tab button.flat {
+      color: rgba(191, 195, 205, 0.85);
       padding: 0;
       margin-top: 4px;
       margin-bottom: 4px;
@@ -3368,8 +3369,10 @@ notebook > header {
       notebook > header tab button.flat:hover {
         background: transparent;
         box-shadow: none;
-        color: #FF0000; }
-      notebook > header tab button.flat, notebook > header tab button.flat:backdrop {
+        color: #ffffff; }
+      notebook > header tab button.flat:active {
+        color: #ff6a00; }
+      notebook > header tab button.flat:backdrop {
         color: alpha(currentColor,0.3); }
   notebook > header.top tabs, notebook > header.bottom tabs {
     padding-left: 0px;
@@ -6779,8 +6782,8 @@ SheetStyleDialog.unity-force-quit {
  * App-Specific Styles *
  ***********************/
 .background.chromium {
-  color: #BFC3CD;
-  background-color: #181d32; }
+  color: rgba(191, 195, 205, 0.8);
+  background-color: #833906; }
 
 /*********
  * Geary *

diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css
@@ -3360,6 +3360,7 @@ notebook > header {
         border-color: rgba(59, 62, 71, 0.145);
         background-color: #15192b; }
     notebook > header tab button.flat {
+      color: rgba(191, 195, 205, 0.85);
       padding: 0;
       margin-top: 4px;
       margin-bottom: 4px;
@@ -3368,8 +3369,10 @@ notebook > header {
       notebook > header tab button.flat:hover {
         background: transparent;
         box-shadow: none;
-        color: #FF0000; }
-      notebook > header tab button.flat, notebook > header tab button.flat:backdrop {
+        color: #ffffff; }
+      notebook > header tab button.flat:active {
+        color: #ff6a00; }
+      notebook > header tab button.flat:backdrop {
         color: alpha(currentColor,0.3); }
   notebook > header.top tabs, notebook > header.bottom tabs {
     padding-left: 0px;
@@ -6779,8 +6782,8 @@ SheetStyleDialog.unity-force-quit {
  * App-Specific Styles *
  ***********************/
 .background.chromium {
-  color: #BFC3CD;
-  background-color: #181d32; }
+  color: rgba(191, 195, 205, 0.8);
+  background-color: #833906; }
 
 /*********
  * Geary *

diff --git a/gtk-3.0/widgets/_notebooks.scss b/gtk-3.0/widgets/_notebooks.scss
@@ -200,13 +200,16 @@ notebook {
 
       // colors the button like the label, overridden otherwise
       button.flat {
+				color: transparentize($fg_color, 0.15);
         &:hover {
           background: transparent;
           box-shadow: none;
-          color: $red;
+          color: $selected_fg_color;
         }
-
-        &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
+        &:active {
+					color: $theme_color;
+        }
+				&:backdrop { color: gtkalpha(currentColor, 0.3); }
 
         padding: 0;
         margin-top: 4px;

diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css
@@ -3332,6 +3332,7 @@ notebook > header {
         border-color: rgba(59, 62, 71, 0.145);
         background-color: #15192b; }
     notebook > header tab button.flat {
+      color: rgba(191, 195, 205, 0.85);
       padding: 0;
       margin-top: 4px;
       margin-bottom: 4px;
@@ -3340,8 +3341,10 @@ notebook > header {
       notebook > header tab button.flat:hover {
         background: transparent;
         box-shadow: none;
-        color: #FF0000; }
-      notebook > header tab button.flat, notebook > header tab button.flat:backdrop {
+        color: #ffffff; }
+      notebook > header tab button.flat:active {
+        color: #ff6a00; }
+      notebook > header tab button.flat:backdrop {
         color: alpha(currentColor,0.3); }
   notebook > header.top tabs, notebook > header.bottom tabs {
     padding-left: 0px;

diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css
@@ -3332,6 +3332,7 @@ notebook > header {
         border-color: rgba(59, 62, 71, 0.145);
         background-color: #15192b; }
     notebook > header tab button.flat {
+      color: rgba(191, 195, 205, 0.85);
       padding: 0;
       margin-top: 4px;
       margin-bottom: 4px;
@@ -3340,8 +3341,10 @@ notebook > header {
       notebook > header tab button.flat:hover {
         background: transparent;
         box-shadow: none;
-        color: #FF0000; }
-      notebook > header tab button.flat, notebook > header tab button.flat:backdrop {
+        color: #ffffff; }
+      notebook > header tab button.flat:active {
+        color: #ff6a00; }
+      notebook > header tab button.flat:backdrop {
         color: alpha(currentColor,0.3); }
   notebook > header.top tabs, notebook > header.bottom tabs {
     padding-left: 0px;

diff --git a/gtk-4.0/widgets/_notebooks.scss b/gtk-4.0/widgets/_notebooks.scss
@@ -200,13 +200,16 @@ notebook {
 
       // colors the button like the label, overridden otherwise
       button.flat {
+      	color: transparentize($fg_color, 0.15);
         &:hover {
           background: transparent;
           box-shadow: none;
-          color: $red;
+          color: $selected_fg_color;
         }
-
-        &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
+        &:active {
+					color: $theme_color;
+        }
+        &:backdrop { color: gtkalpha(currentColor, 0.3); }
 
         padding: 0;
         margin-top: 4px;