Improvement: Cinnamon - calendar today button label color visibility …

…and rounded corners
thekomer · May 21, 2022 · e21c4d7 · e21c4d7
1 parent 66d5ea3
commit e21c4d7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 23 deletions.
diff --git a/cinnamon/cinnamon.css b/cinnamon/cinnamon.css
@@ -19,7 +19,7 @@ stage {
 /* * * * * *
  * Buttons *
  * * * * * */
-.popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .notification-button, .notification-icon-button, .modal-dialog-button-box .modal-dialog-button, .sound-button {
+.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: 200ms;
@@ -28,29 +28,29 @@ stage {
   background-color: #161b2e;
   border: 1px solid rgba(191, 195, 205, 0.05);
   box-shadow: inset 0 2px 4px rgba(22, 27, 46, 0.05); }
-  .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .notification-button, .notification-icon-button, .modal-dialog-button-box .modal-dialog-button, .sound-button, .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .notification-button:focus, .notification-icon-button:focus, .modal-dialog-button-box .modal-dialog-button:focus, .sound-button:focus, .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .notification-button:hover, .notification-icon-button:hover, .modal-dialog-button-box .modal-dialog-button:hover, .sound-button:hover, .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .notification-button:hover:focus, .notification-icon-button:hover:focus, .modal-dialog-button-box .modal-dialog-button:hover:focus, .sound-button:hover:focus, .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .notification-button:active, .notification-icon-button:active, .modal-dialog-button-box .modal-dialog-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .notification-button:active:focus, .notification-icon-button:active:focus, .modal-dialog-button-box .modal-dialog-button:active:focus, .sound-button:active:focus, .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .notification-button:insensitive, .notification-icon-button:insensitive, .modal-dialog-button-box .modal-dialog-button:insensitive, .sound-button:insensitive {
+  .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; }
-  .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .notification-button:focus, .notification-icon-button:focus, .modal-dialog-button-box .modal-dialog-button:focus, .sound-button:focus {
+  .sound-button:focus, .modal-dialog-button-box .modal-dialog-button:focus, .notification-button:focus, .notification-icon-button:focus, .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus {
     color: #BFC3CD;
     background-color: #161b2e;
     border: 1px solid #ff6a00;
     box-shadow: inset 0 2px 4px rgba(22, 27, 46, 0.05); }
-  .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .notification-button:hover, .notification-icon-button:hover, .modal-dialog-button-box .modal-dialog-button:hover, .sound-button:hover {
+  .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 rgba(191, 195, 205, 0.05);
     box-shadow: inset 0 2px 4px rgba(31, 37, 63, 0.05); }
-  .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .notification-button:hover:focus, .notification-icon-button:hover:focus, .modal-dialog-button-box .modal-dialog-button:hover:focus, .sound-button:hover:focus {
+  .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;
     background-color: #1f253f;
     border: 1px solid #ff6a00;
     box-shadow: inset 0 2px 4px rgba(22, 27, 46, 0.05); }
-  .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .notification-button:active, .notification-icon-button:active, .modal-dialog-button-box .modal-dialog-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .notification-button:active:focus, .notification-icon-button:active:focus, .modal-dialog-button-box .modal-dialog-button:active:focus, .sound-button:active:focus {
+  .sound-button:active, .modal-dialog-button-box .modal-dialog-button:active, .notification-button:active, .notification-icon-button:active, .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active {
     color: #ffffff;
     background-color: #ff6a00;
     border: 1px solid #ff6a00;
     box-shadow: inset 0 2px 4px #ff6a00; }
-  .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .notification-button:insensitive, .notification-icon-button:insensitive, .modal-dialog-button-box .modal-dialog-button:insensitive, .sound-button:insensitive {
+  .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(191, 195, 205, 0);
     background-color: rgba(22, 27, 46, 0.55);
@@ -59,7 +59,7 @@ stage {
 /* * * * * *
  * Entries *
  * * * * * */
-.popup-menu #notification StEntry, #menu-search-entry {
+#menu-search-entry, .popup-menu #notification StEntry {
   padding: 7px;
   caret-size: 1px;
   selection-background-color: #ff6a00;
@@ -70,17 +70,17 @@ stage {
   background-color: #131727;
   border: 1px solid rgba(191, 195, 205, 0.05);
   box-shadow: inset 0 2px 4px rgba(19, 23, 39, 0.05); }
-  .popup-menu #notification StEntry:focus, #menu-search-entry:focus, .popup-menu #notification StEntry:hover, #menu-search-entry:hover {
+  #menu-search-entry:focus, .popup-menu #notification StEntry:focus, #menu-search-entry:hover, .popup-menu #notification StEntry:hover {
     color: #BFC3CD;
     background-color: #131727;
     border: 1px solid #ff6a00;
     box-shadow: inset 0 2px 4px rgba(19, 23, 39, 0.05); }
-  .popup-menu #notification StEntry:insensitive, #menu-search-entry:insensitive {
+  #menu-search-entry:insensitive, .popup-menu #notification StEntry:insensitive {
     color: rgba(191, 195, 205, 0.45);
     background-color: #111423;
     border-color: 1px solid rgba(19, 22, 34, 0.4775);
     box-shadow: inset 0 2px 4px rgba(17, 20, 35, 0.05); }
-  .popup-menu #notification StEntry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning {
+  #menu-search-entry StIcon.capslock-warning, .popup-menu #notification StEntry StIcon.capslock-warning {
     icon-size: 1em;
     color: #cc5500;
     padding: 0 4px; }
@@ -826,7 +826,8 @@ StScrollBar {
 
 .calendar-day {
   border-width: 0;
-  color: rgba(191, 195, 205, 0.9); }
+  color: rgba(191, 195, 205, 0.9);
+  border-radius: 0.5em; }
 
 .calendar-day-top {
   border-top-width: 0; }
@@ -842,11 +843,13 @@ StScrollBar {
 .calendar-today {
   color: #ffffff;
   background-color: rgba(255, 106, 0, 0.4);
-  border: 1px solid #ff6a00;
-  border-radius: 0.5em; }
+  border: 1px solid #ff6a00; }
   .calendar-today:selected {
     color: #ff6a00;
     font-weight: bold; }
+    .calendar-today:selected:hover {
+      color: #ffffff;
+      border-color: rgba(255, 255, 255, 0.4); }
 
 .calendar-not-today {
   color: #BFC3CD; }
@@ -1636,8 +1639,7 @@ StScrollBar {
 .workspace-switcher {
   padding-left: 3px;
   padding-right: 3px; }
-  .panel-left .workspace-switcher,
-  .panel-right .workspace-switcher {
+  .panel-left .workspace-switcher, .panel-right .workspace-switcher {
     padding: 0; }
 
 .workspace-button {
@@ -1776,18 +1778,14 @@ StScrollBar {
 .applet-label {
   font-weight: bold;
   color: #BFC3CD; }
-  .applet-label:hover, .applet-label:checked,
-  .applet-box:hover > .applet-label,
-  .applet-box:checked > .applet-label {
+  .applet-label:hover, .applet-label:checked, .applet-box:hover > .applet-label, .applet-box:checked > .applet-label {
     color: #ffffff;
     text-shadow: none; }
 
 .applet-icon {
   color: #BFC3CD;
   icon-size: 22px; }
-  .applet-icon:hover, .applet-icon:checked,
-  .applet-box:hover > .applet-icon,
-  .applet-box:checked > .applet-icon {
+  .applet-icon:hover, .applet-icon:checked, .applet-box:hover > .applet-icon, .applet-box:checked > .applet-icon {
     color: #ffffff;
     text-shadow: none; }
 

diff --git a/cinnamon/sass/_common.scss b/cinnamon/sass/_common.scss
@@ -988,6 +988,7 @@ StScrollBar {
 .calendar-day {
   border-width: 0;
   color: transparentize($fg_color, 0.1);
+  border-radius: 0.5em;
 }
 
 .calendar-day-top {
@@ -1009,11 +1010,15 @@ StScrollBar {
 	background-color: if($variant == 'light', transparentize($selected_bg_color, 0.6), transparentize($selected_bg_color, 0.6));
 	//border-width: 0;
 	border: 1px solid $selected_bg_color;
-	border-radius: 0.5em;
+	//border-radius: 0.5em;
 	&:selected {
 		color: $selected_bg_color;
 		font-weight: bold;
 		//@include bg_gradient(horizontal, $theme_gradient_start, $theme_gradient_end, 1);
+		&:hover{
+			color: $selected_fg_color;
+			border-color: transparentize($selected_fg_color, 0.6);
+		}
   }
 }