Improvement: Gnome-shell - text entries appearance

thekomer · Apr 28, 2022 · 1fdf32e · 1fdf32e
1 parent e2d7f05
commit 1fdf32e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 72 deletions.
diff --git a/gnome-shell/_drawing.scss b/gnome-shell/_drawing.scss
@@ -50,14 +50,14 @@
 //
 
   @if $t==normal {
-    background-color: $gray;
+    background-color: lighten($base_color, 5%);
     border-color: $borders_color;
 
     @include _shadows($depth);
 
   }
-  @if $t==focus { @include _shadows($depth); }
-  @if $t==hover { }
+  @if $t==focus { border-color: transparentize($selected_bg_color, 0.4); }
+  @if $t==hover { border-color: transparentize($selected_bg_color, 0.4); }
   @if $t==insensitive {
     color: $insensitive_fg_color;
     box-shadow: $depth;

diff --git a/gnome-shell/gnome-shell.css b/gnome-shell/gnome-shell.css
@@ -96,7 +96,7 @@ stage {
 
 /* Entries */
 StEntry {
-  background-color: #2f3962;
+  background-color: #191d31;
   border-color: #0b0d16;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   border-radius: 2px;
@@ -106,7 +106,7 @@ StEntry {
   selection-background-color: #ff6a00;
   selected-color: #ffffff; }
   StEntry:focus {
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
+    border-color: rgba(255, 106, 0, 0.6); }
   StEntry:insensitive {
     color: #676a75;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
@@ -780,17 +780,9 @@ StScrollBar {
     #panel .panel-button .system-status-icon {
       icon-size: 1.09em;
       padding: 0 5px; }
-    .unlock-screen #panel .panel-button,
-    .login-screen #panel .panel-button,
-    .lock-screen #panel .panel-button {
+    .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button {
       color: #dcdee3; }
-      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
-      .login-screen #panel .panel-button:focus,
-      .login-screen #panel .panel-button:hover,
-      .login-screen #panel .panel-button:active,
-      .lock-screen #panel .panel-button:focus,
-      .lock-screen #panel .panel-button:hover,
-      .lock-screen #panel .panel-button:active {
+      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active {
         color: #dcdee3; }
     #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked {
       box-shadow: none; }
@@ -1040,8 +1032,8 @@ StScrollBar {
   color: #bfc3cd;
   background-color: transparent; }
 
-.message-list-section-close:hover > StIcon,
-.message-list-section-close:focus > StIcon .message-list-section-close:active > StIcon {
+.message-list-section-close:hover > StIcon, .message-list-section-close:focus > StIcon
+.message-list-section-close:active > StIcon {
   color: #FF0000;
   background: transparent; }
 
@@ -1436,8 +1428,7 @@ StScrollBar {
 .show-apps,
 .grid-search-result {
   border: none; }
-  .app-well-app:active .overview-icon,
-  .app-well-app:checked .overview-icon,
+  .app-well-app:active .overview-icon, .app-well-app:checked .overview-icon,
   .app-well-app.app-folder:active .overview-icon,
   .app-well-app.app-folder:checked .overview-icon,
   .show-apps:active .overview-icon,
@@ -1447,9 +1438,7 @@ StScrollBar {
     background-color: rgba(2, 3, 5, 0.85);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
     color: #bfc3cd; }
-  .app-well-app:hover .overview-icon,
-  .app-well-app:focus .overview-icon,
-  .app-well-app:selected .overview-icon,
+  .app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon,
   .app-well-app.app-folder:hover .overview-icon,
   .app-well-app.app-folder:focus .overview-icon,
   .app-well-app.app-folder:selected .overview-icon,
@@ -1864,8 +1853,7 @@ StScrollBar {
 
 .login-dialog-not-listed-label {
   padding-left: 2px; }
-  .login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
-  .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
+  .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
     color: #bfc3cd; }
 
 .login-dialog-not-listed-label {

diff --git a/gnome-shell/v40/_common.scss b/gnome-shell/v40/_common.scss
@@ -60,11 +60,11 @@ stage {
 /* Entries */
 StEntry {
   @include entry(normal);
-  border-radius: 2px;
+  border-radius: 6px;
   padding: 4px;
-  border-width: 0;
+  border-width: 2px;
   color: $fg_color;
-  //&:hover { @include entry(hover);}
+  &:hover { @include entry(hover);}
   &:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));}
   &:insensitive { @include entry(insensitive);}
   selection-background-color: $selected_bg_color;
@@ -1400,19 +1400,9 @@ StScrollBar {
   .search-entry {
     width: 320px;
     padding: 9px;
-    border-radius: 100px;
-    border: 1px solid $borders_color;
-    color: $fg_color;
-    background-color: $_dash_bg;
-    box-shadow: $depth;
-
+    border-radius: 10px;
 
     .search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); }
-
-    &:hover, &:focus {
-      background-color: transparentize($bg_color, 0.2);
-      .search-entry-icon { color: $fg_color; }
-    }
   }
 
   //search results
@@ -2178,5 +2168,4 @@ StScrollBar {
     border: 2px solid grey;
     border-radius: 4px;
     padding: 6px;
-  }
-
+  }
diff --git a/gnome-shell/v40/gnome-shell.css b/gnome-shell/v40/gnome-shell.css
@@ -95,17 +95,19 @@ stage {
 
 /* Entries */
 StEntry {
-  background-color: #2f3962;
+  background-color: #191d31;
   border-color: #0b0d16;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
+  border-radius: 6px;
   padding: 4px;
-  border-width: 0;
+  border-width: 2px;
   color: #bfc3cd;
   selection-background-color: #ff6a00;
   selected-color: #ffffff; }
+  StEntry:hover {
+    border-color: rgba(255, 106, 0, 0.6); }
   StEntry:focus {
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
+    border-color: rgba(255, 106, 0, 0.6); }
   StEntry:insensitive {
     color: #676a75;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
@@ -761,17 +763,9 @@ StScrollBar {
     #panel .panel-button .system-status-icon {
       icon-size: 1.09em;
       padding: 0 5px; }
-    .unlock-screen #panel .panel-button,
-    .login-screen #panel .panel-button,
-    .lock-screen #panel .panel-button {
+    .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button {
       color: #dcdee3; }
-      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
-      .login-screen #panel .panel-button:focus,
-      .login-screen #panel .panel-button:hover,
-      .login-screen #panel .panel-button:active,
-      .lock-screen #panel .panel-button:focus,
-      .lock-screen #panel .panel-button:hover,
-      .lock-screen #panel .panel-button:active {
+      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active {
         color: #dcdee3; }
     #panel .panel-button.clock-display:hover, #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked {
       box-shadow: none; }
@@ -1005,8 +999,8 @@ StScrollBar {
   color: #bfc3cd;
   background-color: transparent; }
 
-.message-list-section-close:hover > StIcon,
-.message-list-section-close:focus > StIcon .message-list-section-close:active > StIcon {
+.message-list-section-close:hover > StIcon, .message-list-section-close:focus > StIcon
+.message-list-section-close:active > StIcon {
   color: #FF0000;
   background: transparent; }
 
@@ -1256,19 +1250,11 @@ StScrollBar {
 .search-entry {
   width: 320px;
   padding: 9px;
-  border-radius: 100px;
-  border: 1px solid #0b0d16;
-  color: #bfc3cd;
-  background-color: #090b13;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
+  border-radius: 10px; }
   .search-entry .search-entry-icon {
     icon-size: 1em;
     padding: 0 4px;
     color: rgba(191, 195, 205, 0.7); }
-  .search-entry:hover, .search-entry:focus {
-    background-color: rgba(14, 17, 29, 0.8); }
-    .search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
-      color: #bfc3cd; }
 
 .search-provider-icon:focus,
 .list-search-result:focus, .search-provider-icon:hover,
@@ -1396,8 +1382,7 @@ StScrollBar {
 .show-apps,
 .grid-search-result {
   border: none; }
-  .app-well-app:active .overview-icon,
-  .app-well-app:checked .overview-icon,
+  .app-well-app:active .overview-icon, .app-well-app:checked .overview-icon,
   .app-well-app.app-folder:active .overview-icon,
   .app-well-app.app-folder:checked .overview-icon,
   .show-apps:active .overview-icon,
@@ -1407,9 +1392,7 @@ StScrollBar {
     background-color: rgba(2, 3, 5, 0.85);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
     color: #bfc3cd; }
-  .app-well-app:hover .overview-icon,
-  .app-well-app:focus .overview-icon,
-  .app-well-app:selected .overview-icon,
+  .app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon,
   .app-well-app.app-folder:hover .overview-icon,
   .app-well-app.app-folder:focus .overview-icon,
   .app-well-app.app-folder:selected .overview-icon,
@@ -1824,8 +1807,7 @@ StScrollBar {
 
 .login-dialog-not-listed-label {
   padding-left: 2px; }
-  .login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
-  .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
+  .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
     color: #bfc3cd; }
 
 .login-dialog-not-listed-label {