Upgrade to Cinnamon 4.x, various fixes, grouped-list support

cinnamon/cinnamon.css

@@ -1,7 +1,7 @@
 /* ###################################################################
- * Section common with Gnome Shell
+* Section common with Gnome Shell
- * ... contains a few cinnamon specific styles (rare occurences) 
+* ... contains a few cinnamon specific styles (rare occurences)
- * ###################################################################*/
+* ###################################################################*/
 stage {
   font-family: Noto Sans, sans-serif;
 }
@@ -40,15 +40,15 @@ StScrollBar StBin#trough {
 StScrollBar StButton#vhandle,
 StScrollBar StButton#hhandle:hover,
 StScrollBar StButton#vhandle:hover {
-    border-image: url('outset-shadow.png') 3;
+border-image: url('outset-shadow.png') 3;
 }*/
 
 /* .menu-applications-box StButton#vhandle {
-    background: url('handle-vert.png') no-repeat center center;
+background: url('handle-vert.png') no-repeat center center;
 }
 
 .menu-applications-box StButton#vhandle:hover {
-    background: url('handle-vert.png') no-repeat center center;
+background: url('handle-vert.png') no-repeat center center;
 }*/
 
 
@@ -66,8 +66,8 @@ StScrollBar StButton#vhandle:hover {
 }
 
 /* ===================================================================
- * Shared button properties 
+* Shared button properties
- * ===================================================================*/
+* ===================================================================*/
 
 .notification-button, .notification-icon-button,
 .hotplug-notification-item, .hotplug-resident-eject-button,
@@ -98,8 +98,8 @@ StScrollBar StButton#vhandle:hover {
 }
 
 /* ===================================================================
- * User Applet
+* User Applet
- * ===================================================================*/
+* ===================================================================*/
 
 .user-box {
   padding: .4em 1.5em;
@@ -126,8 +126,8 @@ StScrollBar StButton#vhandle:hover {
 }
 
 /* ===================================================================
- * PopupMenu (popupMenu.js) 
+* PopupMenu (popupMenu.js)
- * ===================================================================*/
+* ===================================================================*/
 
 .menu,
 .popup-menu-boxpointer {
@@ -192,8 +192,8 @@ StScrollBar StButton#vhandle:hover {
   border-radius: 0px 0px 8px 0px;
 }
 /* The remaining popup-menu sizing is all done in ems, so that if you
- * override .popup-menu.font-size, everything else will scale with it.
+* override .popup-menu.font-size, everything else will scale with it.
- */
+*/
 
 .menu StEntry,
 .popup-menu StEntry {
@@ -223,14 +223,13 @@ StScrollBar StButton#vhandle:hover {
   border: 2px solid transparent;
 }
 .popup-menu-item:active {
-/*    background-color: #2975E9; */
+  /*    background-color: #2975E9; */
   border-image: url('menu-assets/hover.png') 5;
 }
 .popup-menu-item:insensitive {
   color: #9f9f9f;
 }
-.popup-image-menu-item {
+.popup-image-menu-item {}
-}
 .popup-combobox-item {
   spacing: 1em;
 }
@@ -288,8 +287,8 @@ StScrollBar StButton#vhandle:hover {
 }
 
 /* ===================================================================
- * Panel (panel.js)
+* Panel (panel.js)
- * ===================================================================*/
+* ===================================================================*/
 
 #panel {
   background-color: rgba(0,0,0,0);
@@ -309,8 +308,7 @@ StScrollBar StButton#vhandle:hover {
   spacing: 4px;
 }
 
-#panelRight {
+#panelRight {}
-}
 
 /* show desktop applet, disable hover */
 #panelRight .applet-box:last-child:hover {
@@ -370,11 +368,9 @@ StScrollBar StButton#vhandle:hover {
   spacing: 0px;
 }
 
-.panel-top {
+.panel-top {}
-}
 
-.panel-bottom {
+.panel-bottom {}
-}
 
 .panel-status-button,
 .panel-button {
@@ -447,8 +443,7 @@ StScrollBar StButton#vhandle:hover {
   icon-shadow: black 0px 2px 2px;
 }
 
-.panel-menu {
+.panel-menu {}
-}
 
 .popup-menu-item-dot {
 
@@ -459,8 +454,8 @@ StScrollBar StButton#vhandle:hover {
 }
 
 /* ===================================================================
- * Overview 
+* Overview
- * ===================================================================*/
+* ===================================================================*/
 
 #overview {
   spacing: 12px;
@@ -578,8 +573,6 @@ StScrollBar StButton#vhandle:hover {
 
 .expo-background {
   background-color: rgba(0,0,0,0.2);
-    background-image: url('expo.png');
-    background-position: center center;
 }
 
 .workspace-overview-background-shade {
@@ -600,26 +593,26 @@ StScrollBar StButton#vhandle:hover {
 * Desklets (desklet.js)
 * ===================================================================*/
 .desklet {
-color: #eee;  
+  color: #eee;
 }
 
 .desklet-with-borders {
-border: 1px solid #444;
+  border: 1px solid #444;
   border-bottom: 0px;
   border-left: 0px;
   border-right: 0px;
   background-color: #232323;
   border-radius: 0px;
-color: #eee;  
+  color: #eee;
 }
 
 .desklet-with-borders-and-header {
-border: 1px solid #444;
+  border: 1px solid #444;
   border-bottom: 0px;
   border-left: 0px;
   border-right: 0px;
   background-color: #232323;
-color: #eee;   
+  color: #eee;
   border-radius-bottomleft: 0px;
   border-radius-bottomright: 0px;
 }
@@ -629,13 +622,13 @@ color: #eee;
   border-radius-topright: 0px;
   font-size: 10.5pt;
 
-border: 1px solid #444;
+  border: 1px solid #444;
   border-bottom: 0px;
   border-left: 0px;
   border-right: 0px;
   background-color: #232323;
   border-radius: 0px;
-color: #eee;  
+  color: #eee;
   padding: 6px;
 }
 
@@ -644,12 +637,11 @@ color: #eee;
 }
 
 
-.clock-desklet-label {
+.clock-desklet-label {}
-}
 
 .photoframe-box {
-padding: 6px;
+  padding: 6px;
-border: 1px solid #444;
+  border: 1px solid #444;
   border-bottom: 0px;
   border-left: 0px;
   border-right: 0px;
@@ -658,22 +650,21 @@ border: 1px solid #444;
 
 }
 .xkcd-box {
-padding: 0px;
+  padding: 0px;
-border: none;
+  border: none;
-background-color: none;
+  background-color: none;
-border-radius: 0px;
+  border-radius: 0px;
 }
 
 /* ===================================================================
- * Clock Desklet (desklet.js) 
+* Clock Desklet (desklet.js)
- * ===================================================================*/
+* ===================================================================*/
-.clock-desklet-label {
+.clock-desklet-label {}
-} 
 
 
 /* ===================================================================
- * Looking Glass 
+* Looking Glass
- * ===================================================================*/
+* ===================================================================*/
 
 #LookingGlassDialog {
   background-gradient-direction: vertical;
@@ -772,8 +763,8 @@ border-radius: 0px;
 }
 
 /* ===================================================================
- * Date applet 
+* Date applet
- * ===================================================================*/
+* ===================================================================*/
 
 .calendar {
   padding: .4em 1.75em;
@@ -842,13 +833,12 @@ border-radius: 0px;
 }
 
 .calendar-day-base:hover {
-/*    background-color: #2975E9; */
+  /*    background-color: #2975E9; */
   border-image: url('menu-assets/hover.png') 5;
   color: black;
 }
 
-.calendar-day-base:active {
+.calendar-day-base:active {}
-}
 
 .calendar-day-heading {
   color: black;
@@ -865,12 +855,9 @@ border-radius: 0px;
   border-top-width: 0;
   border-left-width: 0;
 }
-.calendar-day-top {
+.calendar-day-top {}
-}
+.calendar-day-left {}
-.calendar-day-left {
+.calendar-work-day {}
-}
-.calendar-work-day {
-}
 
 .calendar-nonwork-day {
   background-color: rgba(255, 255, 255, 0.2);
@@ -893,8 +880,8 @@ border-radius: 0px;
 }
 
 /* ===================================================================
- * Notifications
+* Notifications
- * ===================================================================*/
+* ===================================================================*/
 
 #notification {
   border: 1px solid #767676;
@@ -918,9 +905,9 @@ border-radius: 0px;
   color: black;
 }
 /* We use row-span = 2 for the image cell, which prevents its height preferences to be
-    taken into account during allocation, so its height ends up being limited by the height
+taken into account during allocation, so its height ends up being limited by the height
-    of the content in the other rows. To avoid showing a stretched image, we set the minimum
+of the content in the other rows. To avoid showing a stretched image, we set the minimum
-    height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159 */
+height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159 */
 .notification-with-image {
   min-height: 159px;
   color: black;
@@ -1031,8 +1018,8 @@ border-radius: 0px;
 }
 
 /* ===================================================================
- * Alt Tab
+* Alt Tab
- * ===================================================================*/
+* ===================================================================*/
 
 #altTabPopup {
   padding: 8px;
@@ -1045,7 +1032,7 @@ border-radius: 0px;
   border: solid 1px rgba(252.9,252.9,252.9,0.50);
   box-shadow: solid 0 0 12px 6px rgba(0,0,0,0.77);
   color: white;
-/*    border-image: url('tab.png') 18; */
+  /*    border-image: url('tab.png') 18; */
   background-gradient-direction: vertical;
   background-gradient-start: rgba(0,0,0,0.50);
   background-gradient-end: rgba(0,0,0,0.18);
@@ -1093,7 +1080,7 @@ border-radius: 0px;
 
 .switcher-list .item-box:selected {
   border-radius: 3px;
-/*    border: 4px solid #379aff; */
+  /*    border: 4px solid #379aff; */
   border: solid 1px rgba(181,198,218,0.80);
   background-color: rgba(181,198,218,0.55);
 }
@@ -1147,14 +1134,14 @@ border-radius: 0px;
 }
 
 /* ===================================================================
- * Modal dialogs
+* Modal dialogs
- * ===================================================================*/
+* ===================================================================*/
 
 .modal-dialog {
   font-size: 9.5pt;
   border-radius: 2px;
   background-color: #fff;
-/*    border: 2px solid #013b6b; */
+  /*    border: 2px solid #013b6b; */
   border-image: url('menu-assets/background.png') 8;
   color: black;
   padding-right: 42px;
@@ -1177,8 +1164,7 @@ border-radius: 0px;
   padding: 4px 32px 5px;
 }
 
-.modal-dialog-button:hover {
+.modal-dialog-button:hover {}
-}
 
 .modal-dialog-button:active,
 .modal-dialog-button:checked {
@@ -1195,8 +1181,8 @@ border-radius: 0px;
 }
 
 /* ===================================================================
- * Run dialog
+* Run dialog
- * ===================================================================*/
+* ===================================================================*/
 
 .run-dialog-label {
   font-size: 9pt;
@@ -1251,8 +1237,8 @@ border-radius: 0px;
 }
 
 /* ===================================================================
- * End session dialog
+* End session dialog
- * ===================================================================*/
+* ===================================================================*/
 
 .end-session-dialog {
   spacing: 42px;
@@ -1394,8 +1380,8 @@ border-radius: 0px;
 }
 
 /* ===================================================================
- * Policykit authentication dialog
+* Policykit authentication dialog
- * ===================================================================*/
+* ===================================================================*/
 
 .polkit-dialog {
   /* this is the width of the entire modal popup */
@@ -1486,8 +1472,8 @@ border-radius: 0px;
 }
 
 /* ===================================================================
- * Magnifier
+* Magnifier
- * ===================================================================*/
+* ===================================================================*/
 
 
 .magnifier-zoom-region {
@@ -1499,8 +1485,8 @@ border-radius: 0px;
 }
 
 /* ===================================================================
- * On screen keyboard
+* On screen keyboard
- * ===================================================================*/
+* ===================================================================*/
 
 
 #keyboard {
@@ -1528,10 +1514,10 @@ border-radius: 0px;
   font-size: 14pt;
   font-weight: bold;
   border-radius: 1px;
-border: 1px #717171;
+  border: 1px #717171;
-border-bottom: 0px;
+  border-bottom: 0px;
-border-left: 0px;
+  border-left: 0px;
-border-right: 0px;
+  border-right: 0px;
   color: #eaeaea;
 }
 
@@ -1539,11 +1525,11 @@ border-right: 0px;
   background-gradient-direction: vertical;
   background-gradient-start: #272727;
   background-gradient-end: #272727;
-border: 1px rgba(120,120,120,1);
+  border: 1px rgba(120,120,120,1);
-border-bottom: 0px;
+  border-bottom: 0px;
-border-left: 0px;
+  border-left: 0px;
-border-right: 0px;
+  border-right: 0px;
-border-radius: 1px;
+  border-radius: 1px;
 }
 
 .keyboard-key:checked,
@@ -1551,11 +1537,11 @@ border-radius: 1px;
   background-gradient-direction: vertical;
   background-gradient-start: #2975E9;
   background-gradient-end: #2975E9;
-border: 1px #76d2ec;
+  border: 1px #76d2ec;
   border-bottom: 0px;
   border-left: 0px;
   border-right: 0px;
-border-radius: 1px;
+  border-radius: 1px;
   color: black;
 
 }
@@ -1564,11 +1550,11 @@ border-radius: 1px;
   background-gradient-direction: vertical;
   background-gradient-start: #2975E9;
   background-gradient-end: #2975E9;
-border: 1px #76d2ec;
+  border: 1px #76d2ec;
   border-bottom: 0px;
   border-left: 0px;
   border-right: 0px;
-border-radius: 1px;
+  border-radius: 1px;
   color: black;
 
 }
@@ -1586,12 +1572,12 @@ border-radius: 1px;
 }
 
 /* ###################################################################
- * Cinnamon Specific Section 
+* Cinnamon Specific Section
- * ###################################################################*/
+* ###################################################################*/
 
 /* ===================================================================
- * Menu (menu.js)
+* Menu (menu.js)
- * ===================================================================*/
+* ===================================================================*/
 
 /* Main menu title */
 .starkmenu-background,
@@ -1624,7 +1610,7 @@ border-radius: 1px;
 }
 
 .menu-favorites-button:hover {
-/*    background-color: #2975E9; */
+  /*    background-color: #2975E9; */
   border-image: url('menu-assets/hover.png') 5;
 }
 
@@ -1688,7 +1674,7 @@ border-radius: 1px;
 .menu-application-button-selected {
   padding: 7px;
   color: black;
-/*    background-color: #2975E9;*/
+  /*    background-color: #2975E9;*/
   border-image: url('menu-assets/hover.png') 5;
 }
 
@@ -1712,7 +1698,7 @@ border-radius: 1px;
 .menu-category-button-selected {
   padding: 7px;
   color: black;
-/*    background-color: #2975E9;*/
+  /*    background-color: #2975E9;*/
   border-image: url('menu-assets/hover.png') 5;
 }
 
@@ -1725,7 +1711,7 @@ border-radius: 1px;
 }
 
 /* Name and description of the currently hovered item in the menu
- * This appears on the bottom right hand corner of the menu*/
+* This appears on the bottom right hand corner of the menu*/
 
 .menu-selected-app-box {
   padding-top: 16px;
@@ -1766,12 +1752,11 @@ border-radius: 1px;
 }
 
 /* Context menu (at the moment only for favorites) */
-.menu-context-menu {
+.menu-context-menu {}
-}
 
 /* ===================================================================
- * Window list (windowList.js)
+* Window list (windowList.js)
- * ===================================================================*/
+* ===================================================================*/
 .window-list-box {
   spacing: 1px;
   padding: 0;
@@ -1799,12 +1784,8 @@ border-radius: 1px;
   border-image: url("panel-assets/item-normal.png") 4;
 }
 
-/* hover 
-- for some reason Cinnamon now considers this as a panel launcher, thus,
-  use the '.panel-launcher:hover' class to change border image */
 .window-list-item-box:hover  {
-/*    border-image: url("panel-assets/item-hover.png") 4; */
+  border-image:url("panel-assets/item-hover.png") 4;
-    border-image:url("panel-assets/tray-hover.png") 4;
 }
 
 /* active window */
@@ -1831,9 +1812,91 @@ border-radius: 1px;
   border-image: url("panel-assets/item-attention-hover.png") 4;
 }
 
+/* experimental support for grouped window list */
+.grouped-window-list-item-box {
+  color: #ffffff;
+  font-weight: normal;
+  border-image: none;
+  transition-duration: 100;
+}
+
+.grouped-window-list-item-box:hover {
+  border-image: url("panel-assets/tray-hover.png") 4;
+}
+
+.grouped-window-list-item-box:active,
+.grouped-window-list-item-box:checked {
+  border-image: url("panel-assets/item-normal.png") 4;
+}
+
+.grouped-window-list-item-box:active:hover,
+.grouped-window-list-item-box:checked:hover {
+  border-image: url("panel-assets/item-hover.png") 4;
+}
+
+.grouped-window-list-item-box:focus {
+  border-image: url("panel-assets/item-active.png") 4;
+}
+
+.grouped-window-list-item-box:focus:hover {
+  border-image: url("panel-assets/item-active-hover.png") 4;
+}
+
+.grouped-window-list-item-demands-attention {
+  font-weight: normal;
+  border-image: url("panel-assets/item-attention.png") 4;
+}
+
+.grouped-window-list-item-attention:hover {
+  border-image: url("panel-assets/item-attention-hover.png") 4;
+}
+
+.window-list-item-box .progress,
+.grouped-window-list-item-box .progress {
+  background-color: #4b7843;
+}
+
+.window-list-preview {
+  spacing: 6px;
+  color: #000000;
+  border: none;
+  border-image: url('menu-assets/background.png') 8;
+  border-radius: 0;
+  padding: 6px 12px 12px 12px;
+  font-size: 1em;
+}
+
+.grouped-window-list-thumbnail-menu {
+  spacing: 6px;
+  border-radius: 0;
+  padding: 6px 12px 12px 12px;
+}
+
+.grouped-window-list-thumbnail-menu > StBoxLayout {
+  padding: 4px;
+}
+
+.grouped-window-list-thumbnail-menu .item-box {
+  padding: 10px;
+  border-radius: 0;
+  spacing: 4px;
+}
+
+.grouped-window-list-thumbnail-menu .item-box:outlined {
+  padding: 8px;
+  border: 1px solid #3b8bff;
+}
+
+.grouped-window-list-thumbnail-menu .item-box:selected {
+  color: #000000;
+  background-color: #3b8bff;
+  border-image: url('menu-assets/hover.png') 5;
+  border: none;
+}
+
 /* ===================================================================
- * Sound Applet (status/volume.js)
+* Sound Applet (status/volume.js)
- * ===================================================================*/
+* ===================================================================*/
 .sound-button-container {
   padding-right: 2px;
   padding-left: 2px;
@@ -1902,8 +1965,8 @@ border-radius: 1px;
 }
 
 /* ===================================================================
- * Workspace Switcher applet (workspaceSwitcher.js)
+* Workspace Switcher applet (workspaceSwitcher.js)
- * ===================================================================*/
+* ===================================================================*/
 #workspaceSwitcher {
   spacing: 2px;
   padding: 2px;
@@ -1934,8 +1997,8 @@ border-radius: 1px;
 }
 
 /* ===================================================================
- * Panel Launchers Applet (panelLaunchers.js)
+* Panel Launchers Applet (panelLaunchers.js)
- * ===================================================================*/
+* ===================================================================*/
 
 #panel-launchers-box {
 
@@ -1948,7 +2011,7 @@ border-radius: 1px;
 }
 
 .panel-launcher:hover {
-/*    background-color: rgba(0,0,0,0.5); */
+  /*    background-color: rgba(0,0,0,0.5); */
   border-image:url("panel-assets/tray-hover.png") 4;
 }
 
@@ -2002,8 +2065,8 @@ border-radius: 1px;
 }
 
 /* ===================================================================
- * Overview corner
+* Overview corner
- * ===================================================================*/
+* ===================================================================*/
 #overview-corner {
   background-image: url("overview.png");
 }
@@ -2013,8 +2076,8 @@ border-radius: 1px;
 }
 
 /* ===================================================================
- * Applets (applet.js) 
+* Applets (applet.js)
- * ===================================================================*/
+* ===================================================================*/
 .applet-separator {
   padding: 5px 4px;
 }
@@ -2060,8 +2123,8 @@ border-radius: 1px;
 .applet-box:hover > .applet-icon {}
 
 /* ===================================================================
- * Workspace OSD
+* Workspace OSD
- * ===================================================================*/
+* ===================================================================*/
 /* When switching workspaces*/
 
 .workspace-osd {
@@ -2108,8 +2171,8 @@ border-radius: 1px;
 }
 
 /* ===================================================================
- * Notification Applet
+* Notification Applet
- * ===================================================================*/
+* ===================================================================*/
 
 .notification-applet-padding {
   padding: .5em 1em;
@@ -2184,10 +2247,10 @@ border-radius: 1px;
 }
 
 /* ===================================================================
- * Network Data Usage Monitor applet
+* Network Data Usage Monitor applet
- * ===================================================================*/
+* ===================================================================*/
 
- /* These settings govern the width of the Applet and the space taken by the font.*/
+/* These settings govern the width of the Applet and the space taken by the font.*/
 
 .numa-left {
   text-align: center;
@@ -2237,8 +2300,8 @@ The colour parameters are red, green, blue, and transparency or a name */
 }
 
 /* ===================================================================
- * Snap/Tile OSD Popup
+* Snap/Tile OSD Popup
- * ===================================================================*/
+* ===================================================================*/
 
 .snap-osd {
   font-size: 18pt;
@@ -2327,9 +2390,9 @@ The colour parameters are red, green, blue, and transparency or a name */
 }
 
 /* ===================================================================
- * CinnXPStarkMenu 
+* CinnXPStarkMenu
- * (if CinnXPStarkMenu is used, change some stuff, else use default)
+* (if CinnXPStarkMenu is used, change some stuff, else use default)
- * ===================================================================*/
+* ===================================================================*/
 .right-buttons-box {
   color: white;
 }
@@ -2346,18 +2409,13 @@ The colour parameters are red, green, blue, and transparency or a name */
   border-radius: 6px 6px 0px 0px;
   padding-bottom: 0px;
 }
-.starkmenu-selected-app-box {
+.starkmenu-selected-app-box {}
-}
 .starkmenu-favorites-box {
 }
-.starkmenu-applications-box {
+.starkmenu-applications-box {}
-}
+.starkmenu-applications-inner-box {}
-.starkmenu-applications-inner-box {
+.starkmenu-applications-box StScrollView {}
-}
+.starkmenu-search-box {}
-.starkmenu-applications-box StScrollView {
-}
-.starkmenu-search-box {
-}
 .hover-user-icon {
   border-radius: 4px;
   border: 7px solid transparent;