GNOME.org
 

[libhandy/tabs: 21/62] Style tweaks


commit c0f6cafa54577c991ed7b1f329dfc1438990d9e5
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sun Sep 6 04:03:54 2020 +0500

    Style tweaks

 src/hdy-tab.ui                     |  4 ---
 src/themes/Adwaita-dark.css        | 24 +++++++--------
 src/themes/Adwaita.css             | 24 +++++++--------
 src/themes/HighContrast.css        | 24 +++++++--------
 src/themes/HighContrastInverse.css | 24 +++++++--------
 src/themes/_Adwaita-base.scss      | 61 ++++++++++++++++++++++++--------------
 src/themes/_shared-base.scss       | 16 ----------
 src/themes/shared.css              |  4 ---
 8 files changed, 78 insertions(+), 103 deletions(-)
---
diff --git a/src/hdy-tab.ui b/src/hdy-tab.ui
index b074fb0e..450d4894 100644
--- a/src/hdy-tab.ui
+++ b/src/hdy-tab.ui
@@ -67,8 +67,6 @@
                 <signal name="clicked" handler="close_clicked_cb" swapped="true"/>
                 <style>
                   <class name="tab-close-button"/>
-                  <class name="image-button"/>
-                  <class name="flat"/>
                 </style>
                 <child>
                   <object class="GtkImage">
@@ -88,7 +86,6 @@
                 <property name="valign">center</property>
                 <signal name="clicked" handler="secondary_icon_clicked_cb" swapped="true"/>
                 <style>
-                  <class name="flat"/>
                   <class name="tab-secondary-icon"/>
                 </style>
                 <child>
@@ -139,7 +136,6 @@
                 <property name="valign">center</property>
                 <signal name="clicked" handler="secondary_icon_clicked_cb" swapped="true"/>
                 <style>
-                  <class name="flat"/>
                   <class name="tab-secondary-icon"/>
                 </style>
                 <child>
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index e23586fe..512cbceb 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -82,10 +82,6 @@ window.csd.unified:not(.solid-csd) headerbar { border-radius: 0; }
 
 .windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
 
-tabbar .tab-close-button, tabbar .tab-secondary-icon { padding: 0; margin: 0; min-width: 24px; min-height: 
24px; }
-
-tabbar .tab-secondary-icon:not(.clickable) { background: none; box-shadow: none; border-color: transparent; }
-
 popover.combo { padding: 0px; }
 
 popover.combo list { border-style: none; background-color: transparent; }
@@ -242,14 +238,6 @@ tabbar tab:backdrop { border-color: #202020; background-color: #2d2d2d; }
 
 tabbar tab:backdrop:checked { background-color: #353535; }
 
-tabbar tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), 
rgba(21, 83, 158, 0.2) 15%, rgba(21, 83, 158, 0) 15%); }
-
-tabbar tab .tab-contents { padding: 6px; }
-
-tabbar tab .tab-close-button, tabbar tab .tab-secondary-icon { border-radius: 99px; }
-
-tabbar tab .tab-close-button:not(:hover), tabbar tab .tab-secondary-icon:not(:hover) { border-color: 
transparent; }
-
 tabbar .start-action, tabbar .end-action { background: #1e1e1e; border-color: #070707; border-style: solid; 
transition: background 150ms ease-in-out; }
 
 tabbar .start-action:backdrop, tabbar .end-action:backdrop { border-color: #202020; background-color: 
#2d2d2d; }
@@ -264,6 +252,14 @@ tabbar .start-action:dir(rtl), tabbar .end-action:dir(ltr) { border-left-width:
 
 tabbar .start-action:dir(rtl) > *, tabbar .end-action:dir(ltr) > * { margin-left: 1px; }
 
-.tab-drag-icon tab { min-height: 38px; background-color: #3a3a3a; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 
0.5), 0 0 0 1px rgba(27, 27, 27, 0.9); margin: 25px; }
+.tab-drag-icon tab { min-height: 38px; background-color: #3a3a3a; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 
0.25), 0 0 0 1px rgba(27, 27, 27, 0.9), inset 0 1px rgba(238, 238, 236, 0.07); margin: 25px; }
+
+tabbar tab .tab-contents, .tab-drag-icon tab .tab-contents { padding: 6px; }
+
+tabbar tab.needs-attention, .tab-drag-icon tab.needs-attention { background-image: radial-gradient(ellipse 
at bottom, rgba(255, 255, 255, 0.8), rgba(21, 83, 158, 0.2) 15%, rgba(21, 83, 158, 0) 15%); }
+
+tabbar tab .tab-close-button, tabbar tab .tab-secondary-icon, .tab-drag-icon tab .tab-close-button, 
.tab-drag-icon tab .tab-secondary-icon { padding: 0; margin: 0; min-width: 24px; min-height: 24px; 
border-radius: 99px; border: none; box-shadow: none; -gtk-icon-shadow: none; text-shadow: none; background: 
none; }
+
+tabbar tab .tab-close-button:hover, tabbar tab .tab-secondary-icon.clickable:hover, .tab-drag-icon tab 
.tab-close-button:hover, .tab-drag-icon tab .tab-secondary-icon.clickable:hover { background: alpha(#eeeeec, 
0.15); }
 
-.tab-drag-icon tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 
255, 0.8), rgba(21, 83, 158, 0.2) 15%, rgba(21, 83, 158, 0) 15%); }
+tabbar tab .tab-close-button:active, tabbar tab .tab-secondary-icon.clickable:active, .tab-drag-icon tab 
.tab-close-button:active, .tab-drag-icon tab .tab-secondary-icon.clickable:active { background: alpha(black, 
0.2); }
diff --git a/src/themes/Adwaita.css b/src/themes/Adwaita.css
index 4036b9de..2084377a 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -82,10 +82,6 @@ window.csd.unified:not(.solid-csd) headerbar { border-radius: 0; }
 
 .windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
 
-tabbar .tab-close-button, tabbar .tab-secondary-icon { padding: 0; margin: 0; min-width: 24px; min-height: 
24px; }
-
-tabbar .tab-secondary-icon:not(.clickable) { background: none; box-shadow: none; border-color: transparent; }
-
 popover.combo { padding: 0px; }
 
 popover.combo list { border-style: none; background-color: transparent; }
@@ -242,14 +238,6 @@ tabbar tab:backdrop { border-color: #d5d0cc; background-color: #e8e6e3; }
 
 tabbar tab:backdrop:checked { background-color: #f6f5f4; }
 
-tabbar tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), 
rgba(53, 132, 228, 0.2) 15%, rgba(53, 132, 228, 0) 15%); }
-
-tabbar tab .tab-contents { padding: 6px; }
-
-tabbar tab .tab-close-button, tabbar tab .tab-secondary-icon { border-radius: 99px; }
-
-tabbar tab .tab-close-button:not(:hover), tabbar tab .tab-secondary-icon:not(:hover) { border-color: 
transparent; }
-
 tabbar .start-action, tabbar .end-action { background: #cdc7c2; border-color: #bfb8b1; border-style: solid; 
transition: background 150ms ease-in-out; }
 
 tabbar .start-action:backdrop, tabbar .end-action:backdrop { border-color: #d5d0cc; background-color: 
#e8e6e3; }
@@ -264,6 +252,14 @@ tabbar .start-action:dir(rtl), tabbar .end-action:dir(ltr) { border-left-width:
 
 tabbar .start-action:dir(rtl) > *, tabbar .end-action:dir(ltr) > * { margin-left: 1px; }
 
-.tab-drag-icon tab { min-height: 38px; background-color: #e6e3e0; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 
0.5), 0 0 0 1px rgba(0, 0, 0, 0.23); margin: 25px; }
+.tab-drag-icon tab { min-height: 38px; background-color: #e6e3e0; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 
0.25), 0 0 0 1px rgba(0, 0, 0, 0.23), inset 0 1px rgba(255, 255, 255, 0.8); margin: 25px; }
+
+tabbar tab .tab-contents, .tab-drag-icon tab .tab-contents { padding: 6px; }
+
+tabbar tab.needs-attention, .tab-drag-icon tab.needs-attention { background-image: radial-gradient(ellipse 
at bottom, rgba(255, 255, 255, 0.8), rgba(53, 132, 228, 0.2) 15%, rgba(53, 132, 228, 0) 15%); }
+
+tabbar tab .tab-close-button, tabbar tab .tab-secondary-icon, .tab-drag-icon tab .tab-close-button, 
.tab-drag-icon tab .tab-secondary-icon { padding: 0; margin: 0; min-width: 24px; min-height: 24px; 
border-radius: 99px; border: none; box-shadow: none; -gtk-icon-shadow: none; text-shadow: none; background: 
none; }
+
+tabbar tab .tab-close-button:hover, tabbar tab .tab-secondary-icon.clickable:hover, .tab-drag-icon tab 
.tab-close-button:hover, .tab-drag-icon tab .tab-secondary-icon.clickable:hover { background: alpha(#2e3436, 
0.15); }
 
-.tab-drag-icon tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 
255, 0.8), rgba(53, 132, 228, 0.2) 15%, rgba(53, 132, 228, 0) 15%); }
+tabbar tab .tab-close-button:active, tabbar tab .tab-secondary-icon.clickable:active, .tab-drag-icon tab 
.tab-close-button:active, .tab-drag-icon tab .tab-secondary-icon.clickable:active { background: alpha(black, 
0.2); }
diff --git a/src/themes/HighContrast.css b/src/themes/HighContrast.css
index 38b5e2f9..455a3185 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -82,10 +82,6 @@ window.csd.unified:not(.solid-csd) headerbar { border-radius: 0; }
 
 .windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
 
-tabbar .tab-close-button, tabbar .tab-secondary-icon { padding: 0; margin: 0; min-width: 24px; min-height: 
24px; }
-
-tabbar .tab-secondary-icon:not(.clickable) { background: none; box-shadow: none; border-color: transparent; }
-
 popover.combo { padding: 0px; }
 
 popover.combo list { border-style: none; background-color: transparent; }
@@ -242,14 +238,6 @@ tabbar tab:backdrop { border-color: #d5d0cc; background-color: #efedec; }
 
 tabbar tab:backdrop:checked { background-color: #fdfdfc; }
 
-tabbar tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), 
rgba(27, 106, 203, 0.2) 15%, rgba(27, 106, 203, 0) 15%); }
-
-tabbar tab .tab-contents { padding: 6px; }
-
-tabbar tab .tab-close-button, tabbar tab .tab-secondary-icon { border-radius: 99px; }
-
-tabbar tab .tab-close-button:not(:hover), tabbar tab .tab-secondary-icon:not(:hover) { border-color: 
transparent; }
-
 tabbar .start-action, tabbar .end-action { background: #d4cfca; border-color: #6e645a; border-style: solid; 
transition: background 150ms ease-in-out; }
 
 tabbar .start-action:backdrop, tabbar .end-action:backdrop { border-color: #d5d0cc; background-color: 
#efedec; }
@@ -264,6 +252,14 @@ tabbar .start-action:dir(rtl), tabbar .end-action:dir(ltr) { border-left-width:
 
 tabbar .start-action:dir(rtl) > *, tabbar .end-action:dir(ltr) > * { margin-left: 1px; }
 
-.tab-drag-icon tab { min-height: 38px; background-color: #edebe9; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 
0.5), 0 0 0 1px rgba(0, 0, 0, 0.23); margin: 25px; }
+.tab-drag-icon tab { min-height: 38px; background-color: #edebe9; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 
0.25), 0 0 0 1px rgba(0, 0, 0, 0.23), inset 0 1px rgba(255, 255, 255, 0.8); margin: 25px; }
+
+tabbar tab .tab-contents, .tab-drag-icon tab .tab-contents { padding: 6px; }
+
+tabbar tab.needs-attention, .tab-drag-icon tab.needs-attention { background-image: radial-gradient(ellipse 
at bottom, rgba(255, 255, 255, 0.8), rgba(27, 106, 203, 0.2) 15%, rgba(27, 106, 203, 0) 15%); }
+
+tabbar tab .tab-close-button, tabbar tab .tab-secondary-icon, .tab-drag-icon tab .tab-close-button, 
.tab-drag-icon tab .tab-secondary-icon { padding: 0; margin: 0; min-width: 24px; min-height: 24px; 
border-radius: 99px; border: none; box-shadow: none; -gtk-icon-shadow: none; text-shadow: none; background: 
none; }
+
+tabbar tab .tab-close-button:hover, tabbar tab .tab-secondary-icon.clickable:hover, .tab-drag-icon tab 
.tab-close-button:hover, .tab-drag-icon tab .tab-secondary-icon.clickable:hover { background: alpha(#272c2e, 
0.15); }
 
-.tab-drag-icon tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 
255, 0.8), rgba(27, 106, 203, 0.2) 15%, rgba(27, 106, 203, 0) 15%); }
+tabbar tab .tab-close-button:active, tabbar tab .tab-secondary-icon.clickable:active, .tab-drag-icon tab 
.tab-close-button:active, .tab-drag-icon tab .tab-secondary-icon.clickable:active { background: alpha(black, 
0.2); }
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index 9cafe129..aa823402 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -82,10 +82,6 @@ window.csd.unified:not(.solid-csd) headerbar { border-radius: 0; }
 
 .windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
 
-tabbar .tab-close-button, tabbar .tab-secondary-icon { padding: 0; margin: 0; min-width: 24px; min-height: 
24px; }
-
-tabbar .tab-secondary-icon:not(.clickable) { background: none; box-shadow: none; border-color: transparent; }
-
 popover.combo { padding: 0px; }
 
 popover.combo list { border-style: none; background-color: transparent; }
@@ -242,14 +238,6 @@ tabbar tab:backdrop { border-color: #202020; background-color: #282828; }
 
 tabbar tab:backdrop:checked { background-color: #303030; }
 
-tabbar tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.8), 
rgba(15, 59, 113, 0.2) 15%, rgba(15, 59, 113, 0) 15%); }
-
-tabbar tab .tab-contents { padding: 6px; }
-
-tabbar tab .tab-close-button, tabbar tab .tab-secondary-icon { border-radius: 99px; }
-
-tabbar tab .tab-close-button:not(:hover), tabbar tab .tab-secondary-icon:not(:hover) { border-color: 
transparent; }
-
 tabbar .start-action, tabbar .end-action { background: #191919; border-color: #4e4e4e; border-style: solid; 
transition: background 150ms ease-in-out; }
 
 tabbar .start-action:backdrop, tabbar .end-action:backdrop { border-color: #202020; background-color: 
#282828; }
@@ -264,6 +252,14 @@ tabbar .start-action:dir(rtl), tabbar .end-action:dir(ltr) { border-left-width:
 
 tabbar .start-action:dir(rtl) > *, tabbar .end-action:dir(ltr) > * { margin-left: 1px; }
 
-.tab-drag-icon tab { min-height: 38px; background-color: #353535; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 
0.5), 0 0 0 1px rgba(104, 104, 104, 0.9); margin: 25px; }
+.tab-drag-icon tab { min-height: 38px; background-color: #353535; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 
0.25), 0 0 0 1px rgba(104, 104, 104, 0.9), inset 0 1px rgba(238, 238, 236, 0.07); margin: 25px; }
+
+tabbar tab .tab-contents, .tab-drag-icon tab .tab-contents { padding: 6px; }
+
+tabbar tab.needs-attention, .tab-drag-icon tab.needs-attention { background-image: radial-gradient(ellipse 
at bottom, rgba(255, 255, 255, 0.8), rgba(15, 59, 113, 0.2) 15%, rgba(15, 59, 113, 0) 15%); }
+
+tabbar tab .tab-close-button, tabbar tab .tab-secondary-icon, .tab-drag-icon tab .tab-close-button, 
.tab-drag-icon tab .tab-secondary-icon { padding: 0; margin: 0; min-width: 24px; min-height: 24px; 
border-radius: 99px; border: none; box-shadow: none; -gtk-icon-shadow: none; text-shadow: none; background: 
none; }
+
+tabbar tab .tab-close-button:hover, tabbar tab .tab-secondary-icon.clickable:hover, .tab-drag-icon tab 
.tab-close-button:hover, .tab-drag-icon tab .tab-secondary-icon.clickable:hover { background: alpha(#f3f3f1, 
0.15); }
 
-.tab-drag-icon tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 255, 
255, 0.8), rgba(15, 59, 113, 0.2) 15%, rgba(15, 59, 113, 0) 15%); }
+tabbar tab .tab-close-button:active, tabbar tab .tab-secondary-icon.clickable:active, .tab-drag-icon tab 
.tab-close-button:active, .tab-drag-icon tab .tab-secondary-icon.clickable:active { background: alpha(black, 
0.2); }
diff --git a/src/themes/_Adwaita-base.scss b/src/themes/_Adwaita-base.scss
index e17747e9..f2c9a903 100644
--- a/src/themes/_Adwaita-base.scss
+++ b/src/themes/_Adwaita-base.scss
@@ -483,27 +483,6 @@ tabbar {
         background-color: $tab_selected_bg_backdrop;
       }
     }
-
-    &.needs-attention {
-      background-image:
-        radial-gradient(ellipse at bottom,
-                        transparentize(white, .2),
-                        transparentize($tab_needs_attention_color, .8) 15%,
-                        transparentize($tab_needs_attention_color, 1) 15%);
-    }
-
-    .tab-contents {
-      padding: 6px;
-    }
-
-    .tab-close-button,
-    .tab-secondary-icon {
-      border-radius: 99px;
-
-      &:not(:hover) {
-        border-color: transparent;
-      }
-    }
   }
 
   .start-action,
@@ -550,10 +529,20 @@ tabbar {
 
     $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
 
-    box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
-                0 0 0 1px $_wm_border; //doing borders with box-shadow
+    box-shadow: 0 3px 9px 1px transparentize(black, 0.75),
+                0 0 0 1px $_wm_border, //doing borders with box-shadow
+                inset 0 1px $top_hilight;
 
     margin: 25px;
+  }
+}
+
+tabbar,
+.tab-drag-icon {
+  tab {
+    .tab-contents {
+      padding: 6px;
+    }
 
     &.needs-attention {
       background-image:
@@ -562,5 +551,31 @@ tabbar {
                         transparentize($tab_needs_attention_color, .8) 15%,
                         transparentize($tab_needs_attention_color, 1) 15%);
     }
+
+    .tab-close-button,
+    .tab-secondary-icon {
+      padding: 0;
+      margin: 0;
+      min-width: 24px;
+      min-height: 24px;
+      border-radius: 99px;
+
+      border: none;
+      box-shadow: none;
+      -gtk-icon-shadow: none;
+      text-shadow: none;
+      background: none;
+    }
+
+    .tab-close-button,
+    .tab-secondary-icon.clickable {
+      &:hover {
+        background: hdyalpha($fg_color, .15);
+      }
+
+      &:active {
+        background: hdyalpha(black, .2);
+      }
+    }
   }
 }
diff --git a/src/themes/_shared-base.scss b/src/themes/_shared-base.scss
index 0cd3ead6..6fec1a0a 100644
--- a/src/themes/_shared-base.scss
+++ b/src/themes/_shared-base.scss
@@ -19,19 +19,3 @@ window.csd.unified:not(.solid-csd) {
     -GtkWidget-window-dragging: true;
   }
 }
-
-tabbar {
-  .tab-close-button,
-  .tab-secondary-icon {
-    padding: 0;
-    margin: 0;
-    min-width: 24px;
-    min-height: 24px;
-  }
-
-  .tab-secondary-icon:not(.clickable) {
-    background: none;
-    box-shadow: none;
-    border-color: transparent;
-  }
-}
diff --git a/src/themes/shared.css b/src/themes/shared.css
index 0fc80fad..66f9ea88 100644
--- a/src/themes/shared.css
+++ b/src/themes/shared.css
@@ -4,7 +4,3 @@ popover.combo list { min-width: 200px; }
 window.csd.unified:not(.solid-csd) headerbar { border-radius: 0; }
 
 .windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
-
-tabbar .tab-close-button, tabbar .tab-secondary-icon { padding: 0; margin: 0; min-width: 24px; min-height: 
24px; }
-
-tabbar .tab-secondary-icon:not(.clickable) { background: none; box-shadow: none; border-color: transparent; }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]