Improvements: Cinnamon - less orange inside start menu ... and color …

…shape
thekomer · Feb 4, 2022 · b2e0948 · b2e0948
1 parent 39f37c9
commit b2e0948
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 72 deletions.
diff --git 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
@@ -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%));