From b2e09485e11dba2a79babe1dce33fc05dc520f78 Mon Sep 17 00:00:00 2001
From: Komer <thekomer@gmail.com>
Date: Fri, 4 Feb 2022 04:28:47 +0100
Subject: [PATCH] Improvements: Cinnamon - less orange inside start menu ...
 and color shape

---
 cinnamon/cinnamon.css      | 105 ++++++++++++++++++++-----------------
 cinnamon/sass/_colors.scss |   3 +-
 cinnamon/sass/_common.scss |  56 ++++++++++++--------
 3 files changed, 92 insertions(+), 72 deletions(-)

diff --git a/cinnamon/cinnamon.css b/cinnamon/cinnamon.css
index cbf3382..7a77c1d 100644
--- a/cinnamon/cinnamon.css
+++ b/cinnamon/cinnamon.css
@@ -22,10 +22,11 @@ stage {
 .sound-button, .modal-dialog-button-box .modal-dialog-button, .notification-button, .notification-icon-button, .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button {
   min-height: 20px;
   padding: 5px 32px;
-  transition-duration: 0;
+  transition-duration: 200ms;
+  background-clip: padding-box;
   color: #BFC3CD;
   background-color: #161b2e;
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   box-shadow: inset 0 2px 4px rgba(22, 27, 46, 0.05); }
   .sound-button, .modal-dialog-button-box .modal-dialog-button, .notification-button, .notification-icon-button, .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button {
     border-radius: 0.5em; }
@@ -37,7 +38,7 @@ stage {
   .sound-button:hover, .modal-dialog-button-box .modal-dialog-button:hover, .notification-button:hover, .notification-icon-button:hover, .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover {
     color: #BFC3CD;
     background-color: #1f253f;
-    border: 1px solid #040508;
+    border: 1px solid rgba(191, 195, 205, 0.05);
     box-shadow: inset 0 2px 4px rgba(31, 37, 63, 0.05); }
   .sound-button:hover:focus, .modal-dialog-button-box .modal-dialog-button:hover:focus, .notification-button:hover:focus, .notification-icon-button:hover:focus, .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus {
     color: #BFC3CD;
@@ -51,7 +52,7 @@ stage {
     box-shadow: inset 0 2px 4px #ff6a00; }
   .sound-button:insensitive, .modal-dialog-button-box .modal-dialog-button:insensitive, .notification-button:insensitive, .notification-icon-button:insensitive, .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive {
     color: rgba(191, 195, 205, 0.45);
-    border: 1px solid rgba(4, 5, 8, 0.55);
+    border: 1px solid rgba(191, 195, 205, 0);
     background-color: rgba(22, 27, 46, 0.55);
     box-shadow: inset 0 2px 4px rgba(22, 27, 46, 0.05); }
 
@@ -67,7 +68,7 @@ stage {
   border-radius: 1em;
   color: #BFC3CD;
   background-color: #131727;
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   box-shadow: inset 0 2px 4px rgba(19, 23, 39, 0.05); }
   #menu-search-entry:focus, .popup-menu #notification StEntry:focus, #menu-search-entry:hover, .popup-menu #notification StEntry:hover {
     color: #BFC3CD;
@@ -77,11 +78,11 @@ stage {
   #menu-search-entry:insensitive, .popup-menu #notification StEntry:insensitive {
     color: rgba(191, 195, 205, 0.45);
     background-color: #111423;
-    border-color: 1px solid #090a12;
+    border-color: 1px solid rgba(19, 22, 34, 0.4775);
     box-shadow: inset 0 2px 4px rgba(17, 20, 35, 0.05); }
   #menu-search-entry StIcon.capslock-warning, .popup-menu #notification StEntry StIcon.capslock-warning {
-    icon-size: 16px;
-    warning-color: #cc5500;
+    icon-size: 1em;
+    color: #cc5500;
     padding: 0 4px; }
 
 .notification StEntry {
@@ -250,7 +251,7 @@ StScrollBar {
  * * * * * * * * */
 #LookingGlassDialog {
   color: #BFC3CD;
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   border-radius: 3px;
   background-color: #0E111D;
   spacing: 4px;
@@ -261,7 +262,7 @@ StScrollBar {
  * * * * * * * * */
 .menu {
   color: #BFC3CD;
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   border-radius: 3px;
   background-color: rgba(14, 17, 29, 0.99); }
   .menu.top {
@@ -348,7 +349,7 @@ StScrollBar {
   -arrow-border-radius: 3px;
   -arrow-background-color: #0E111D;
   -arrow-border-width: 1px;
-  -arrow-border-color: #040508;
+  -arrow-border-color: rgba(191, 195, 205, 0.05);
   -arrow-base: 21px;
   -arrow-rise: 9px;
   -boxpointer-gap: 2px; }
@@ -652,7 +653,7 @@ StScrollBar {
   margin-right: .5em;
   padding: .5em;
   min-width: 350px;
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   background-color: #131727; }
 
 .calendar-events-no-events-button {
@@ -716,7 +717,7 @@ StScrollBar {
       color: #ff6a00; }
   .calendar-event-button:hover {
     background-color: #ff6a00;
-    border: 1px solid #040508; }
+    border: 1px solid rgba(191, 195, 205, 0.05); }
     .calendar-event-button:hover .calendar-event-time-past,
     .calendar-event-button:hover .calendar-event-time-present,
     .calendar-event-button:hover .calendar-event-time-future,
@@ -839,12 +840,13 @@ StScrollBar {
   font-weight: bold; }
 
 .calendar-today {
-  color: #BFC3CD;
+  color: #fefefe;
   background-color: rgba(255, 106, 0, 0.4);
   border: 1px solid #ff6a00;
   border-radius: 0.5em; }
   .calendar-today:selected {
-    color: #fefefe; }
+    color: #ff6a00;
+    font-weight: bold; }
 
 .calendar-not-today {
   color: #BFC3CD; }
@@ -872,7 +874,7 @@ StScrollBar {
  * Notifications *
  * * * * * * * * */
 #notification {
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   border-radius: 3px;
   background-color: #0E111D;
   padding: 13px;
@@ -991,7 +993,7 @@ StScrollBar {
 
 .modal-dialog {
   background-color: #0E111D;
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   border-radius: 3px;
   padding: 5px 10px; }
   .modal-dialog > StBoxLayout:first-child {
@@ -1017,7 +1019,7 @@ StScrollBar {
  * * * * * * * */
 .run-dialog {
   padding: 10px 15px 10px 15px;
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   border-radius: 3px;
   background-color: rgba(14, 17, 29, 0.75); }
   .run-dialog > * {
@@ -1142,7 +1144,7 @@ StScrollBar {
   border-radius: 3px;
   box-shadow: none;
   color: #fefefe;
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   background-color: rgba(69, 79, 89, 0.2); }
   .keyboard-key:hover {
     color: #fefefe;
@@ -1178,16 +1180,19 @@ StScrollBar {
   padding: 10px;
   transition-duration: 300;
   background-color: #131727;
-  border: 1px solid #040508; }
+  border: 1px solid rgba(191, 195, 205, 0.05);
+  border-radius: 0.4em; }
 
 .menu-favorites-button {
   padding: .9em 1em;
-  border: 1px solid rgba(0, 0, 0, 0);
-  border-radius: 9px; }
+  border: 1px solid rgba(191, 195, 205, 0.05);
+  border-radius: 0.5em; }
   .menu-favorites-button:hover {
-    background-gradient-direction: horizontal;
-    background-gradient-start: rgba(255, 51, 0, 0.7);
-    background-gradient-end: rgba(255, 161, 0, 0.7); }
+    background-clip: padding-box;
+    background-color: rgba(255, 255, 255, 0.075);
+    border: 1px solid rgba(191, 195, 205, 0.05);
+    -gtk-icon-effect: highlight;
+    color: #fefefe; }
 
 .menu-places-box {
   padding: 10px;
@@ -1203,17 +1208,19 @@ StScrollBar {
   padding: 10px 10px 0 10px; }
 
 .menu-application-button {
-  padding: 7px;
-  border: 1px solid rgba(0, 0, 0, 0); }
+  padding: 0.2em;
+  border: 1px solid rgba(191, 195, 205, 0);
+  border-radius: 0.5em; }
   .menu-application-button:highlighted {
     font-weight: bold; }
   .menu-application-button-selected {
     padding: 7px;
+    background-clip: padding-box;
     color: #fefefe;
-    background-gradient-direction: horizontal;
-    background-gradient-start: rgba(255, 51, 0, 0.7);
-    background-gradient-end: rgba(255, 161, 0, 0.7);
-    border: 1px solid #040508; }
+    background: rgba(255, 255, 255, 0.075);
+    border: 1px solid rgba(191, 195, 205, 0.05);
+    border-radius: 0.5em;
+    -gtk-icon-effect: highlight; }
     .menu-application-button-selected:highlighted {
       font-weight: bold; }
   .menu-application-button-label:ltr {
@@ -1223,18 +1230,18 @@ StScrollBar {
 
 .menu-category-button {
   padding: 7px;
-  border: 1px solid rgba(0, 0, 0, 0); }
+  border-radius: 1em;
+  border: 1px solid rgba(191, 195, 205, 0); }
+  .menu-category-button-hover {
+    border-radius: 1em; }
   .menu-category-button-selected {
     padding: 7px;
     color: #fefefe;
     background-gradient-direction: horizontal;
     background-gradient-start: #ff3300;
     background-gradient-end: #ffa100;
-    border: 1px solid #040508;
-    border-radius: 9px; }
-  .menu-category-button-hover {
-    background-color: red;
-    border-radius: 2px; }
+    border: 1px solid rgba(191, 195, 205, 0.05);
+    border-radius: 1em; }
   .menu-category-button-greyed {
     padding: 7px;
     color: rgba(191, 195, 205, 0.45);
@@ -1272,7 +1279,7 @@ StScrollBar {
   caret-color: #ff6a00; }
 
 .menu-search-entry-icon {
-  icon-size: 1em;
+  icon-size: 0.9em;
   color: #ff6a00; }
 
 /* Context menu (at the moment only for favorites) */
@@ -1285,7 +1292,7 @@ StScrollBar {
   spacing: 1em;
   padding: 16px;
   color: #BFC3CD;
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   border-radius: 5px;
   background-color: #0E111D; }
 
@@ -1302,7 +1309,7 @@ StScrollBar {
   padding: 20px;
   color: #BFC3CD;
   background-color: #0E111D;
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   border-radius: 5px; }
   .osd-window .osd-monitor-label {
     font-size: 3em; }
@@ -1386,7 +1393,7 @@ StScrollBar {
 .window-list-preview {
   spacing: 6px;
   color: #BFC3CD;
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   background-color: #0E111D;
   border-radius: 3px;
   padding: 6px 12px 12px 12px;
@@ -1482,7 +1489,7 @@ StScrollBar {
 
 .grouped-window-list-thumbnail-menu {
   color: #BFC3CD;
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   background-color: #0E111D;
   border-radius: 3px;
   padding: 0px; }
@@ -1565,7 +1572,7 @@ StScrollBar {
     .sound-player > StBoxLayout:first-child StButton:small:hover {
       color: #BFC3CD;
       background-color: #1f253f;
-      border: 1px solid #040508;
+      border: 1px solid rgba(191, 195, 205, 0.05);
       box-shadow: inset 0 2px 4px rgba(31, 37, 63, 0.05); }
     .sound-player > StBoxLayout:first-child StButton:small:active {
       color: #fefefe;
@@ -1582,7 +1589,7 @@ StScrollBar {
   padding: 15px;
   spacing: 0.5em;
   background: rgba(14, 17, 29, 0.9);
-  border-top: 1px solid #040508;
+  border-top: 1px solid rgba(191, 195, 205, 0.05);
   color: #BFC3CD; }
   .sound-player-overlay StButton {
     width: 22px;
@@ -1596,7 +1603,7 @@ StScrollBar {
     .sound-player-overlay StButton:hover {
       color: #BFC3CD;
       background-color: #1f253f;
-      border: 1px solid #040508;
+      border: 1px solid rgba(191, 195, 205, 0.05);
       box-shadow: inset 0 2px 4px rgba(31, 37, 63, 0.05); }
     .sound-player-overlay StButton:active {
       color: #fefefe;
@@ -1805,7 +1812,7 @@ StScrollBar {
   .desklet:highlight {
     background-color: rgba(230, 0, 0, 0.5); }
   .desklet-with-borders {
-    border: 1px solid #040508;
+    border: 1px solid rgba(191, 195, 205, 0.05);
     border-radius: 5px;
     background-color: #0E111D;
     color: #BFC3CD;
@@ -1814,7 +1821,7 @@ StScrollBar {
     .desklet-with-borders:highlight {
       background-color: rgba(230, 0, 0, 0.5); }
   .desklet-with-borders-and-header {
-    border: 1px solid #040508;
+    border: 1px solid rgba(191, 195, 205, 0.05);
     border-top-width: 0;
     border-radius: 0 0 5px 5px;
     background-color: #0E111D;
@@ -1827,7 +1834,7 @@ StScrollBar {
     .desklet-with-borders-and-header:highlight {
       background-color: rgba(230, 0, 0, 0.5); }
   .desklet-header {
-    border: 1px solid #040508;
+    border: 1px solid rgba(191, 195, 205, 0.05);
     border-radius: 5px 5px 0 0;
     background-color: #090b13;
     color: #BFC3CD;
@@ -1839,7 +1846,7 @@ StScrollBar {
     background-color: rgba(255, 106, 0, 0.3); }
 
 .photoframe-box {
-  border: 1px solid #040508;
+  border: 1px solid rgba(191, 195, 205, 0.05);
   border-radius: 5px;
   background-color: #0E111D;
   color: #BFC3CD;
diff --git a/cinnamon/sass/_colors.scss b/cinnamon/sass/_colors.scss
index dba7fb4..9e9b89f 100644
--- a/cinnamon/sass/_colors.scss
+++ b/cinnamon/sass/_colors.scss
@@ -26,7 +26,8 @@ $accent_color: $orange;
 $selected_fg_color: #fefefe;
 $selected_bg_color: if($variant == 'light', #92b372, $orange);
 
-$borders_color: if($variant =='light', darken($bg_color,20%), darken($bg_color,6%));
+//$borders_color: if($variant =='light', darken($bg_color,20%), darken($bg_color,6%));
+$borders_color: if($variant =='light', darken($bg_color,20%), transparentize($fg_color, 0.95));
 $separator_color: if($variant == 'light', #cfcfcf, darken($bg_color, 6%));
 $link_color: if($variant == 'light', darken($selected_bg_color,10%),
                                      lighten($selected_bg_color,20%));
diff --git a/cinnamon/sass/_common.scss b/cinnamon/sass/_common.scss
index e2f53cd..9e239d3 100644
--- a/cinnamon/sass/_common.scss
+++ b/cinnamon/sass/_common.scss
@@ -15,7 +15,9 @@ stage {
 %button {
   min-height: 20px;
   padding: 5px 32px;
-  transition-duration: 0;
+  transition-duration: 200ms;
+  background-clip: padding-box;
+
 
   &, &:focus, &:hover, &:hover:focus, &:active, &:active:focus, &:insensitive {
     border-radius: 0.5em;
@@ -61,9 +63,9 @@ stage {
   &:focus, &:hover { @include entry(focus); }
   &:insensitive { @include entry(insensitive); }
 
-  StIcon.capslock-warning {
-    icon-size: 16px;
-    warning-color: $warning_color;
+	StIcon.capslock-warning {
+    icon-size: 1em; // 16px;
+    color: $warning_color; //warning-color: $warning_color;
     padding: 0 4px;
   }
 }
@@ -1425,16 +1427,20 @@ StScrollBar {
     transition-duration: 300;
     background-color: $base_color;
     border: 1px solid $borders_color;
+    border-radius: 0.4em;
   }
 
   &-favorites-button {
     padding: .9em 1em;
-    border: 1px solid rgba(0,0,0,0);
-    border-radius: 9px;
+    border: 1px solid $borders_color;
+    border-radius: 0.5em; //9px;
     &:hover {
-      //background-color: transparentize($selected_bg_color, 0.3);
-      @include bg_gradient(horizontal, $orange_gradient_start,
-      	$orange_gradient_end, 0.7);
+			background-clip: padding-box;
+      background-color: transparentize(white, 0.925);
+      border: 1px solid $borders_color;
+      //@include bg_gradient(horizontal, $orange_gradient_start, $orange_gradient_end, 0.7);
+      -gtk-icon-effect: highlight;
+      color: $selected_fg_color;
     }
   }
 
@@ -1454,19 +1460,24 @@ StScrollBar {
   &-applications-outer-box { padding: 10px 10px 0 10px; }
 
   &-application-button {
-    padding: 7px;
-    border: 1px solid rgba(0,0,0,0);
+    padding: 0.2em;
+    border: 1px solid transparentize($borders_color, 0.5); //rgba(0,0,0,0);
+    border-radius: 0.5em;
 
     // This style is used in menu application buttons for applications which were newly installed
     &:highlighted { font-weight: bold; }
 
     &-selected {
       padding: 7px;
+      background-clip: padding-box;
       color: $selected_fg_color;
       //background-color: $selected_bg_color;
-      @include bg_gradient(horizontal, $orange_gradient_start,
-      	$orange_gradient_end, 0.7);
+      //@include bg_gradient(horizontal, $orange_gradient_start, $orange_gradient_end, 0.7);
+      background: transparentize(white, 0.925);
+      //border: 1px solid transparentize($selected_bg_color, 0.6);
       border: 1px solid $borders_color;
+      border-radius: 0.5em;
+      -gtk-icon-effect: highlight;
 
       &:highlighted { font-weight: bold; }
     }
@@ -1477,20 +1488,21 @@ StScrollBar {
 
   &-category-button {
     padding: 7px;
-    border: 1px solid rgba(0,0,0,0);
+    border-radius: 1em;
+    border: 1px solid transparentize($borders_color, 0.5); //rgba(0,0,0,0);
 
+		&-hover {
+		//@include bg_gradient(horizontal, $orange_gradient_start, $orange_gradient_end, 0.5);
+      border-radius: 1em;
+    }
     &-selected {
       padding: 7px;
       color: $selected_fg_color;
       //background-color: $selected_bg_color;
-      @include bg_gradient(horizontal, $orange_gradient_start,
-      	$orange_gradient_end, 1);
+      //background: linear-gradient(red, yellow);
+      @include bg_gradient(horizontal, $orange_gradient_start, $orange_gradient_end, 1);
       border: 1px solid $borders_color;
-      border-radius: 9px;
-    }
-    &-hover {
-      background-color: red;
-      border-radius: 2px;
+      border-radius: 1em; //9px;
     }
     &-greyed {
       padding: 7px;
@@ -1533,7 +1545,7 @@ StScrollBar {
 }
 
 .menu-search-entry-icon {
-  icon-size: 1em;
+  icon-size: 0.9em; //1em;
   color: $accent_color;
 }