Improvements: GTK3&4: osd button color

thekomer · Mar 7, 2022 · 155a9dd · 155a9dd
1 parent 06a255b
commit 155a9dd
Show file tree

Hide file tree

Showing 8 changed files with 260 additions and 196 deletions.
diff --git a/gtk-3.0/_drawing.scss b/gtk-3.0/_drawing.scss
@@ -353,7 +353,7 @@
     $_bg: if($c!=$base_color, transparentize($c, 0.5), $base_color);
     color: $osd_fg_color;
     border-color: $osd_borders_color;
-    border: 2px solid $osd_borders_color;
+    //border: 1px solid $osd_borders_color;
     background-color: $_bg;
     background-clip: padding-box;
     box-shadow: inset 0 1px transparentize(white, 0.9);
@@ -366,9 +366,9 @@
 		//
     $_bg: if($c!=$base_color, transparentize($c, 0.3),	lighten($osd_bg_color, 12%));
     color: white;
-    //border-color: $osd_borders_color;
-    border: 2px solid transparentize($theme_color, 0.6);
-    background-image: linear-gradient(to bottom, $_bg, $_bg);
+    border-color: transparentize($theme_color, 0.6); // $osd_borders_color;
+    //order: 1px solid transparentize($theme_color, 0.6);
+    background-image: linear-gradient(to right, transparentize($theme-gradient-start, 0.5), transparentize($theme-gradient-end, 0.5)); // linear-gradient(to bottom, $_bg, $_bg);
     background-clip: padding-box;
     box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: 0 1px black;

diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css
@@ -523,7 +523,6 @@ button.osd {
   outline-color: rgba(254, 254, 254, 0.3);
   color: #fefefe;
   border-color: rgba(255, 255, 255, 0.1);
-  border: 2px solid rgba(255, 255, 255, 0.1);
   background-color: #111524;
   background-clip: padding-box;
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
@@ -538,8 +537,8 @@ button.osd {
 
   button.osd:hover {
     color: white;
-    border: 2px solid rgba(255, 106, 0, 0.4);
-    background-image: linear-gradient(to bottom, rgba(26, 31, 53, 0.8), rgba(26, 31, 53, 0.8));
+    border-color: rgba(255, 106, 0, 0.4);
+    background-image: linear-gradient(to right, rgba(255, 51, 0, 0.5), rgba(255, 161, 0, 0.5));
     background-clip: padding-box;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
     text-shadow: 0 1px black;
@@ -588,7 +587,6 @@ button.osd {
 button {
   color: #fefefe;
   border-color: rgba(255, 255, 255, 0.1);
-  border: 2px solid rgba(255, 255, 255, 0.1);
   background-color: #111524;
   background-clip: padding-box;
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
@@ -599,8 +597,8 @@ button {
   .osd
   button:hover {
     color: white;
-    border: 2px solid rgba(255, 106, 0, 0.4);
-    background-image: linear-gradient(to bottom, rgba(26, 31, 53, 0.8), rgba(26, 31, 53, 0.8));
+    border-color: rgba(255, 106, 0, 0.4);
+    background-image: linear-gradient(to right, rgba(255, 51, 0, 0.5), rgba(255, 161, 0, 0.5));
     background-clip: padding-box;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
     text-shadow: 0 1px black;
@@ -661,8 +659,8 @@ button {
     .osd
     button.flat:hover {
       color: white;
-      border: 2px solid rgba(255, 106, 0, 0.4);
-      background-image: linear-gradient(to bottom, rgba(26, 31, 53, 0.8), rgba(26, 31, 53, 0.8));
+      border-color: rgba(255, 106, 0, 0.4);
+      background-image: linear-gradient(to right, rgba(255, 51, 0, 0.5), rgba(255, 161, 0, 0.5));
       background-clip: padding-box;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
@@ -808,7 +806,6 @@ button.suggested-action {
   button.suggested-action {
     color: #fefefe;
     border-color: rgba(255, 255, 255, 0.1);
-    border: 2px solid rgba(255, 255, 255, 0.1);
     background-color: rgba(204, 85, 0, 0.5);
     background-clip: padding-box;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
@@ -818,8 +815,8 @@ button.suggested-action {
     .osd
     button.suggested-action:hover {
       color: white;
-      border: 2px solid rgba(255, 106, 0, 0.4);
-      background-image: linear-gradient(to bottom, rgba(204, 85, 0, 0.7), rgba(204, 85, 0, 0.7));
+      border-color: rgba(255, 106, 0, 0.4);
+      background-image: linear-gradient(to right, rgba(255, 51, 0, 0.5), rgba(255, 161, 0, 0.5));
       background-clip: padding-box;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
@@ -962,7 +959,6 @@ button.destructive-action {
   button.destructive-action {
     color: #fefefe;
     border-color: rgba(255, 255, 255, 0.1);
-    border: 2px solid rgba(255, 255, 255, 0.1);
     background-color: rgba(204, 0, 0, 0.5);
     background-clip: padding-box;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
@@ -972,8 +968,8 @@ button.destructive-action {
     .osd
     button.destructive-action:hover {
       color: white;
-      border: 2px solid rgba(255, 106, 0, 0.4);
-      background-image: linear-gradient(to bottom, rgba(204, 0, 0, 0.7), rgba(204, 0, 0, 0.7));
+      border-color: rgba(255, 106, 0, 0.4);
+      background-image: linear-gradient(to right, rgba(255, 51, 0, 0.5), rgba(255, 161, 0, 0.5));
       background-clip: padding-box;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
@@ -1254,7 +1250,7 @@ notebook button, list button, .view button, iconview button, popover button {
 notebook .linked > button, list .linked > button, .view .linked > button, iconview .linked > button, popover .linked > button {
   box-shadow: none; }
 
-/************
+/***********
 * Calendar *
 ***********/
 calendar {
@@ -3656,7 +3652,6 @@ scale {
     .osd scale slider {
       color: #fefefe;
       border-color: rgba(255, 255, 255, 0.1);
-      border: 2px solid rgba(255, 255, 255, 0.1);
       background-color: #111524;
       background-clip: padding-box;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
@@ -3667,8 +3662,8 @@ scale {
       background-color: #06070c; }
       .osd scale slider:hover {
         color: white;
-        border: 2px solid rgba(255, 106, 0, 0.4);
-        background-image: linear-gradient(to bottom, rgba(26, 31, 53, 0.8), rgba(26, 31, 53, 0.8));
+        border-color: rgba(255, 106, 0, 0.4);
+        background-image: linear-gradient(to right, rgba(255, 51, 0, 0.5), rgba(255, 161, 0, 0.5));
         background-clip: padding-box;
         box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
         text-shadow: 0 1px black;
@@ -4460,7 +4455,6 @@ spinbutton.vertical button.down {
 .osd spinbutton.vertical button:first-child {
   color: #fefefe;
   border-color: rgba(255, 255, 255, 0.1);
-  border: 2px solid rgba(255, 255, 255, 0.1);
   background-color: #111524;
   background-clip: padding-box;
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
@@ -4469,8 +4463,8 @@ spinbutton.vertical button.down {
   outline-color: rgba(254, 254, 254, 0.3); }
   .osd spinbutton.vertical button:first-child:hover {
     color: white;
-    border: 2px solid rgba(255, 106, 0, 0.4);
-    background-image: linear-gradient(to bottom, rgba(26, 31, 53, 0.8), rgba(26, 31, 53, 0.8));
+    border-color: rgba(255, 106, 0, 0.4);
+    background-image: linear-gradient(to right, rgba(255, 51, 0, 0.5), rgba(255, 161, 0, 0.5));
     background-clip: padding-box;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
     text-shadow: 0 1px black;
@@ -6276,7 +6270,6 @@ window.thunar statusbar {
   .xfsm-logout-dialog button {
     color: #fefefe;
     border-color: rgba(255, 255, 255, 0.1);
-    border: 2px solid rgba(255, 255, 255, 0.1);
     background-color: #111524;
     background-clip: padding-box;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
@@ -6287,8 +6280,8 @@ window.thunar statusbar {
     margin: 0.5em; }
     .xfsm-logout-dialog button:hover {
       color: white;
-      border: 2px solid rgba(255, 106, 0, 0.4);
-      background-image: linear-gradient(to bottom, rgba(26, 31, 53, 0.8), rgba(26, 31, 53, 0.8));
+      border-color: rgba(255, 106, 0, 0.4);
+      background-image: linear-gradient(to right, rgba(255, 51, 0, 0.5), rgba(255, 161, 0, 0.5));
       background-clip: padding-box;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
@@ -6829,7 +6822,6 @@ ConversationListView {
 #content_frame button {
   color: #fefefe;
   border-color: rgba(255, 255, 255, 0.1);
-  border: 2px solid rgba(255, 255, 255, 0.1);
   background-color: #111524;
   background-clip: padding-box;
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
@@ -6838,8 +6830,8 @@ ConversationListView {
   outline-color: rgba(254, 254, 254, 0.3); }
   #content_frame button:hover {
     color: white;
-    border: 2px solid rgba(255, 106, 0, 0.4);
-    background-image: linear-gradient(to bottom, rgba(255, 106, 0, 0.7), rgba(255, 106, 0, 0.7));
+    border-color: rgba(255, 106, 0, 0.4);
+    background-image: linear-gradient(to right, rgba(255, 51, 0, 0.5), rgba(255, 161, 0, 0.5));
     background-clip: padding-box;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
     text-shadow: 0 1px black;
@@ -6876,7 +6868,6 @@ ConversationListView {
 #buttonbox_frame button {
   color: #fefefe;
   border-color: rgba(255, 255, 255, 0.1);
-  border: 2px solid rgba(255, 255, 255, 0.1);
   background-color: #111524;
   background-clip: padding-box;
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
@@ -6885,8 +6876,8 @@ ConversationListView {
   outline-color: rgba(254, 254, 254, 0.3); }
   #buttonbox_frame button:hover {
     color: white;
-    border: 2px solid rgba(255, 106, 0, 0.4);
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
+    border-color: rgba(255, 106, 0, 0.4);
+    background-image: linear-gradient(to right, rgba(255, 51, 0, 0.5), rgba(255, 161, 0, 0.5));
     background-clip: padding-box;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
     text-shadow: 0 1px black;