improvement: gnopme-shell - search entry color

thekomer · Nov 3, 2022 · 876277c · 876277c
1 parent 9bd9864
commit 876277c
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 44 deletions.
diff --git a/gnome-shell/_common.scss b/gnome-shell/_common.scss
@@ -821,6 +821,7 @@ StScrollBar {
     color: $topbar_color;
     text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
     transition-duration: 100ms;
+    border-radius: 0.5em;
 
     .app-menu-icon {
       -st-icon-style: symbolic;
@@ -836,7 +837,8 @@ StScrollBar {
     }
 
     &:hover {
-      background: lighten($topbar_bg_color, 10%);
+			background-color: lighten(mix($selected_bg_color, $base_color, 15%), 6%);
+      // background: lighten($topbar_bg_color, 10%);
       color: lighten($topbar_color, 10%);
       transition-duration: 200ms;
     }
@@ -1426,20 +1428,26 @@ StScrollBar {
     width: 320px;
     padding: 9px;
     border-radius: 100px;
-    border: none;
+    border: 1px solid transparentize($osd_borders_color, 0.2);
     color: $fg_color;
     background-color: transparentize($bg_color, 0.4);
     box-shadow: $depth;
+
+    .search-entry-icon {
+			icon-size: 1em;
+			padding: 0 4px;
+			color: transparentize($fg_color,.3);
+		}
+
     &:focus {
-      border-width: 0;
+      border-width: 1px;
+      border-color: transparentize($theme_color, 0.5);
       color: $fg_color;
       background-color: transparentize($bg_color, 0.2);
+      .search-entry-icon { color: $theme_color; }
       box-shadow: $depth2;
     }
-
-    .search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); }
-
-    &:hover, &:focus {
+    &:hover {
       background-color: transparentize($bg_color, 0.2);
       .search-entry-icon { color: $fg_color; }
     }

diff --git a/gnome-shell/_drawing.scss b/gnome-shell/_drawing.scss
@@ -13,6 +13,14 @@
 
 // generic drawing of more complex things
 
+// gradient
+
+@mixin gradient($c1: $g1, $c2: $g2, $dir: horizontal) {
+	background-gradient-start: $c1 !important;
+	background-gradient-end: $c2 !important;
+	background-gradient-direction: $dir;
+}
+
 @function _widget_edge($c:$borders_edge) {
 // outer highlight "used" on most widgets
   @return 0 1px $c;
@@ -34,7 +42,9 @@
   @else { box-shadow: $shadow1; }
 }
 
-// entries
+/* * * * * *
+ * entries *
+ * * * * * */
 
 @mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
 //
@@ -64,7 +74,9 @@
   }
 }
 
-// buttons
+/* * * * * *
+ * buttons *
+ * * * * * */
 
 @function _border_color ($c) { @return darken($c,25%); } // colored buttons want
                                                          // the border form the
@@ -155,7 +167,7 @@
   //
     $_bg: if($c!=$osd_bg_color, transparentize($c, 0.5),
                           $osd_bg_color);
-		background-color: lighten(mix($bg_color, $base_color, 15%), 8%);
+		background-color: lighten(mix($selected_bg_color, $base_color, 15%), 8%);
     color: $selected_fg_color;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
@@ -170,7 +182,7 @@
     $_bg: if($c!=$osd_bg_color, transparentize($c, 0.3),
                             lighten($main_dark, 2%));
 
-		background-color: lighten(mix($bg_color, $base_color, 15%), 7%);
+		background-color: lighten(mix($selected_bg_color, $base_color, 15%), 6%);
     color: $selected_fg_color;
     border: 1px solid $borders_color;
     text-shadow: 0 1px black;
@@ -219,10 +231,4 @@
     text-shadow: none;
     icon-shadow: none;
   }
-}
-
-@mixin gradient($c1: $g1, $c2: $g2, $dir: horizontal) {
-	background-gradient-start: $c1 !important;
-	background-gradient-end: $c2 !important;
-	background-gradient-direction: $dir;
 }
diff --git a/gnome-shell/gnome-shell.css b/gnome-shell/gnome-shell.css
@@ -1,6 +1,12 @@
 /*****************
 * Drawing mixins *
 *****************/
+/* * * * * *
+ * entries *
+ * * * * * */
+/* * * * * *
+ * buttons *
+ * * * * * */
 /* GLOBALS */
 stage {
   font-size: 1em;
@@ -19,7 +25,7 @@ stage {
   border-width: 1px;
   padding: 0.4em 2em; }
   .button:focus {
-    background-color: #1f2642;
+    background-color: #4f3330;
     color: #ffffff;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
@@ -39,7 +45,7 @@ stage {
     text-shadow: none;
     icon-shadow: none; }
   .button:hover {
-    background-color: #1d243e;
+    background-color: #492f2d;
     color: #ffffff;
     border: 1px solid rgba(255, 255, 255, 0.05);
     text-shadow: 0 1px black;
@@ -68,22 +74,22 @@ stage {
     text-shadow: none;
     icon-shadow: none; }
   .modal-dialog-linked-button:focus {
-    background-color: #1f2642;
+    background-color: #4f3330;
     color: #ffffff;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
     box-shadow: none;
     border: 1px solid rgba(255, 255, 255, 0.05); }
     .modal-dialog-linked-button:focus:hover {
-      background-color: #1f2642;
+      background-color: #4f3330;
       color: #ffffff;
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black;
       box-shadow: none;
       border: 1px solid rgba(255, 255, 255, 0.05);
       color: white; }
   .modal-dialog-linked-button:hover {
-    background-color: #1d243e;
+    background-color: #492f2d;
     color: #ffffff;
     border: 1px solid rgba(255, 255, 255, 0.05);
     text-shadow: 0 1px black;
@@ -745,7 +751,8 @@ StScrollBar {
     font-weight: bold;
     color: white;
     text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
-    transition-duration: 100ms; }
+    transition-duration: 100ms;
+    border-radius: 0.5em; }
     #panel .panel-button .app-menu-icon {
       -st-icon-style: symbolic;
       margin-left: 4px;
@@ -755,7 +762,7 @@ StScrollBar {
     #panel .panel-button .popup-menu-arrow {
       icon-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9); }
     #panel .panel-button:hover {
-      background: rgba(41, 47, 69, 0.95);
+      background-color: #492f2d;
       color: white;
       transition-duration: 200ms; }
     #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
@@ -1012,7 +1019,7 @@ StScrollBar {
   border: 1px solid rgba(255, 255, 255, 0.05);
   margin: 1.5em 1.5em 0; }
   .message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
-    background-color: #1d243e;
+    background-color: #492f2d;
     color: #ffffff;
     border: 1px solid rgba(255, 255, 255, 0.05);
     text-shadow: 0 1px black;
@@ -1284,22 +1291,25 @@ StScrollBar {
   width: 320px;
   padding: 9px;
   border-radius: 100px;
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0);
   color: #bfc3cd;
   background-color: rgba(14, 17, 29, 0.6);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
-  .search-entry:focus {
-    border-width: 0;
-    color: #bfc3cd;
-    background-color: rgba(14, 17, 29, 0.8);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
   .search-entry .search-entry-icon {
     icon-size: 1em;
     padding: 0 4px;
     color: rgba(191, 195, 205, 0.7); }
-  .search-entry:hover, .search-entry:focus {
+  .search-entry:focus {
+    border-width: 1px;
+    border-color: rgba(255, 106, 0, 0.5);
+    color: #bfc3cd;
+    background-color: rgba(14, 17, 29, 0.8);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
+    .search-entry:focus .search-entry-icon {
+      color: #ff6a00; }
+  .search-entry:hover {
     background-color: rgba(14, 17, 29, 0.8); }
-    .search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
+    .search-entry:hover .search-entry-icon {
       color: #bfc3cd; }
 
 .search-provider-icon:focus,
@@ -1713,14 +1723,14 @@ StScrollBar {
   font-weight: bold;
   border-radius: 5px; }
   .keyboard-key:focus {
-    background-color: #1f2642;
+    background-color: #4f3330;
     color: #ffffff;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
     box-shadow: none;
     border: 1px solid rgba(255, 255, 255, 0.05); }
   .keyboard-key:hover, .keyboard-key:checked {
-    background-color: #1d243e;
+    background-color: #492f2d;
     color: #ffffff;
     border: 1px solid rgba(255, 255, 255, 0.05);
     text-shadow: 0 1px black;
@@ -1811,7 +1821,7 @@ StScrollBar {
       icon-shadow: 0 1px black;
       border: 1px solid rgba(255, 255, 255, 0.05); }
       .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
-        background-color: #1d243e;
+        background-color: #492f2d;
         color: #ffffff;
         border: 1px solid rgba(255, 255, 255, 0.05);
         text-shadow: 0 1px black;

diff --git a/gnome-shell/v40/gnome-shell.css b/gnome-shell/v40/gnome-shell.css
@@ -1,6 +1,12 @@
 /*****************
 * Drawing mixins *
 *****************/
+/* * * * * *
+ * entries *
+ * * * * * */
+/* * * * * *
+ * buttons *
+ * * * * * */
 /* GLOBALS */
 stage {
   font-size: 12pt;
@@ -18,7 +24,7 @@ stage {
   border-radius: 6px;
   padding: 4px 32px; }
   .button:focus, .app-folder-dialog .edit-folder-button:focus {
-    background-color: #1f2642;
+    background-color: #4f3330;
     color: #ffffff;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
@@ -38,7 +44,7 @@ stage {
     text-shadow: none;
     icon-shadow: none; }
   .button:hover, .app-folder-dialog .edit-folder-button:hover {
-    background-color: #1d243e;
+    background-color: #492f2d;
     color: #ffffff;
     border: 1px solid rgba(255, 255, 255, 0.05);
     text-shadow: 0 1px black;
@@ -66,21 +72,21 @@ stage {
     text-shadow: none;
     icon-shadow: none; }
   .modal-dialog-linked-button:focus {
-    background-color: #1f2642;
+    background-color: #4f3330;
     color: #ffffff;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
     box-shadow: none;
     border: 1px solid rgba(255, 255, 255, 0.05); }
     .modal-dialog-linked-button:focus:hover {
-      background-color: #1f2642;
+      background-color: #4f3330;
       color: #ffffff;
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black;
       box-shadow: none;
       border: 1px solid rgba(255, 255, 255, 0.05); }
   .modal-dialog-linked-button:hover {
-    background-color: #1d243e;
+    background-color: #492f2d;
     color: #ffffff;
     border: 1px solid rgba(255, 255, 255, 0.05);
     text-shadow: 0 1px black;
@@ -1685,14 +1691,14 @@ StScrollBar {
   font-weight: bold;
   border-radius: 5px; }
   .keyboard-key:focus {
-    background-color: #1f2642;
+    background-color: #4f3330;
     color: #ffffff;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
     box-shadow: none;
     border: 1px solid rgba(255, 255, 255, 0.05); }
   .keyboard-key:hover, .keyboard-key:checked {
-    background-color: #1d243e;
+    background-color: #492f2d;
     color: #ffffff;
     border: 1px solid rgba(255, 255, 255, 0.05);
     text-shadow: 0 1px black;
@@ -1783,7 +1789,7 @@ StScrollBar {
       icon-shadow: 0 1px black;
       border: 1px solid rgba(255, 255, 255, 0.05); }
       .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
-        background-color: #1d243e;
+        background-color: #492f2d;
         color: #ffffff;
         border: 1px solid rgba(255, 255, 255, 0.05);
         text-shadow: 0 1px black;