Fix mobile category colors in list, fix category-color class CSS variable

Added information about --category-color to the styles doc

api/categories.php

@@ -45,7 +45,7 @@ foreach($categories as $cat)
 		// Use slightly more specific selector that just class, to allow defaults
 		// if the category has no color
 		$content .= "/** {$cat['name']} **/\n/*webComponent*/\n";
-		$content .= ":root,:host {--cat-{$cat['id']}-color: {$cat['data']['color']};}, :host.cat_{$cat['id']}, .cat_{$cat['id']} {--category-color: {$cat['data']['color']};} et2-select-cat > .cat_{$cat['id']} {--category-color: {$cat['data']['color']};} \n";
+		$content .= ":root,:host {--cat-{$cat['id']}-color: {$cat['data']['color']};} :host.cat_{$cat['id']}, .cat_{$cat['id']} {--category-color: {$cat['data']['color']};} et2-select-cat > .cat_{$cat['id']} {--category-color: {$cat['data']['color']};} \n";
 		$content .= "/*legacy*/\n.egwGridView_scrollarea tr.row_category.cat_{$cat['id']} > td:first-child, .select-cat li.cat_{$cat['id']}, .et2_selectbox ul.chzn-results li.cat_{$cat['id']}, .et2_selectbox ul.chzn-choices li.cat_{$cat['id']}, .nextmatch_header_row .et2_selectbox.select-cat.cat_{$cat['id']} a.chzn-single {border-left-color: {$cat['data']['color']};} .cat_{$cat['id']}.fullline_cat_bg, div.cat_{$cat['id']}, span.cat_{$cat['id']} { background-color: {$cat['data']['color']};}  \n";
 	}
 	if (!empty($cat['data']['icon']))

doc/etemplate2/pages/getting-started/styling.md

@@ -1,6 +1,6 @@
 # Styling
 
-Our overall styling is a combination of our site-wide style (pixelegg), etemplate2.css
+Our overall styling is a combination of our site-wide style (pixelegg / kdots), etemplate2.css
 and [Shoelace](https://shoelace.style/) styles
 
 Some handy excerpts:
@@ -22,6 +22,10 @@ Some handy excerpts:
 	--warning-color: rgba(255, 204, 0, .5);
 	--error-color: rgba(204, 0, 51, .5);
 
+	/* Inside a node with a category class like "cat_<category ID>", 
+      this is defined to the category's color 
+    */
+	--category-color: transparent
 }
 ```
 
@@ -78,6 +82,24 @@ These widgets are in an et2-vbox:
 |                 ![fixed label example #3](/assets/images/styling_et2-label-fixed_3.png)                 |
 | *--label_width CSS variable changed for more space*            <br/>Note how 'Responsible' widget wraps |
 
+### cat_\<ID>
+
+Adding a category class sets the category color CSS variable `--category-color` to that category's color. Individual
+category colors are also available with the `--cat-<ID>-color`.
+Usually used in the nextmatch, this will put the colored category indicator on the row.
+
+```
+<styles>
+    tr {
+        border-left: 3px solid var(--category-color);
+    }
+</styles>
+...
+<row class="cat_$row_cont[cat_id]">
+ // Row contents here
+</row>
+```
+
 ## Directly Customising Widgets
 
 If you need to customise an individual widget further, you can

pixelegg/css/mobile.css

@@ -1342,9 +1342,6 @@ option:checked {
 .ui-widget-header .ui-state-error-text {
   color: #FF0000;
 }
-.drop-hover {
-  background-color: #FFDD73;
-}
 .ui-icon-close {
   background-image: url("../../node_modules/bootstrap-icons/icons/x-square.svg");
   background-repeat: no-repeat;
@@ -6803,6 +6800,7 @@ table.egwGridView_grid img.et2_appicon {
   --sl-focus-ring-width: 2px;
   --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
   --track-width: 3px;
+  --et2-favorites-left: 0.4em;
 }
 .bi::before,
 [class^="bi-"]::before,
@@ -7081,7 +7079,11 @@ table.egwGridView_grid img.et2_appicon {
   border-top-color: #404040;
   border-top-width: 4px !important;
 }
-#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon,
+#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon {
+  filter: none;
+  width: calc(1em + 2px) !important;
+  height: calc(1em + 2px) !important;
+}
 .standartTreeImage {
   filter: none;
 }
@@ -7148,6 +7150,11 @@ img.et2_button_icon[src*="svg"]:hover {
 ::-ms-input-placeholder {
   color: #666666;
 }
+.et2_toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
+  justify-content: center;
+  --et2-button-image-padding-left: 0;
+  padding-inline-start: 0;
+}
 @keyframes fw-firstload {
   0%,
   20%,
@@ -7170,6 +7177,9 @@ img.et2_button_icon[src*="svg"]:hover {
   }
 }
 @media all {
+  :host {
+    --et2-favorites-left: 0.7em;
+  }
   body {
     background-color: transparent;
     /*BOF close/back button styling*/
@@ -7206,10 +7216,11 @@ img.et2_button_icon[src*="svg"]:hover {
   body table.egwGridView_outer tbody tr td .mobile_cat_col {
     position: absolute;
     min-height: 100%;
-    bottom: 0;
     top: 0;
+    left: 0px;
     width: 10px;
     display: block;
+    background-color: var(--category-color);
   }
   body table.egwGridView_outer tbody tr td span.cat_.mobile_cat_col {
     background: #F5F5F5;

pixelegg/css/mobile.less

@@ -78,11 +78,11 @@
 						.mobile_cat_col {
 							position: absolute;
 							min-height: 100%;
-							bottom:0;
 							top:0;
+							left: 0px;
 							width:10px;
 							display: block;
-
+							background-color: var(--category-color);
 						}
 						span.cat_.mobile_cat_col {
 							background: #F5F5F5;

pixelegg/mobile/fw_mobile.css

@@ -7023,10 +7023,11 @@ img.et2_button_icon[src*="svg"]:hover {
   body table.egwGridView_outer tbody tr td .mobile_cat_col {
     position: absolute;
     min-height: 100%;
-    bottom: 0;
     top: 0;
+    left: 0px;
     width: 10px;
     display: block;
+    background-color: var(--category-color);
   }
   body table.egwGridView_outer tbody tr td span.cat_.mobile_cat_col {
     background: #F5F5F5;