start of new "fancy" theme

Gruntfile.js

@@ -39,6 +39,17 @@ module.exports = function (grunt) {
 			},
 			pixelegg: {
 				files: {
+					"pixelegg/css/fancy.min.css": [
+						"node_modules/flatpickr/dist/themes/light.css",
+						"vendor/bower-asset/diff2html/dist/diff2html.css",
+						"vendor/bower-asset/cropper/dist/cropper.min.css",
+						"api/templates/default/css/flags.css",
+						"api/templates/default/css/htmlarea.css",
+						"api/templates/default/etemplate2.css",
+						"pixelegg/css/fancy.css",
+						"api/templates/default/print.css",
+						"pixelegg/print.css"
+					],
 					"pixelegg/css/pixelegg.min.css": [
 						"node_modules/flatpickr/dist/themes/light.css",
 						"vendor/bower-asset/diff2html/dist/diff2html.css",

api/js/etemplate/Styles/shoelace.ts

@@ -38,30 +38,12 @@ if(typeof egw !== "undefined" && typeof egw.image == "function")
  * External CSS & widget styles will override this
  */
 export default [css`
-  :root,
-  :host,
-  .sl-theme-light {
-	  --sl-font-sans: egroupware, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-	  --sl-button-font-size-medium: var(--sl-font-size-medium);
-	  --sl-input-help-text-font-size-medium: var(--sl-font-size-medium);
-	  --sl-spacing-small: 0.1rem;
-	  --sl-spacing-medium: 0.5rem;
-
-	  --sl-input-border-radius-small: 2px;
-	  --sl-input-border-radius-medium: 3px;
-	  --sl-input-border-color-focus: #E6E6E6;
-	  --indicator-color: #696969;
-	  --sl-input-focus-ring-color: #26537C;
-	  --sl-focus-ring-width: 2px;
-	  --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
-  }
-
 	.tab-group--top .tab-group__tabs {
-      --track-width: 3px;
+		--track-width: var(--track-width);
-  }
+	}
-  .form-control--has-label .form-control__label {
+	.form-control--has-label .form-control__label {
-    display: inline-block;
+		display: inline-block;
-    color: var(--sl-input-label-color);
+		color: var(--sl-input-label-color);
-    margin-right: var(--sl-spacing-medium);
+		margin-right: var(--sl-spacing-medium);
-  }
+	}
-  `];
+`];

pixelegg/css/fancy.less

@@ -0,0 +1,14 @@
+/**
+ * EGroupware: "fancy" theme
+ *
+ * @link https://www.egroupware.org
+ * @license https://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package pixelegg
+ */
+@import "pixelegg.less";
+
+// overwriting pixelegg.less and Shoelace light theme
+:root, :host, .sl-theme-light {
+	--sl-border-radius-medium: 20px;
+	--sl-input-border-radius-medium: var(--sl-border-radius-medium);
+}

pixelegg/css/mobile.css

@@ -6810,6 +6810,23 @@ table.egwGridView_grid img.et2_appicon {
   filter: initial;
   /* IE 6-9 */
 }
+:root,
+:host,
+.sl-theme-light {
+  --sl-font-sans: egroupware, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --sl-button-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-help-text-font-size-medium: var(--sl-font-size-medium);
+  --sl-spacing-small: 0.1rem;
+  --sl-spacing-medium: 0.5rem;
+  --sl-input-border-radius-small: 2px;
+  --sl-input-border-radius-medium: 3px;
+  --sl-input-border-color-focus: #E6E6E6;
+  --indicator-color: #696969;
+  --sl-input-focus-ring-color: #26537C;
+  --sl-focus-ring-width: 2px;
+  --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
+  --track-width: 3px;
+}
 #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #addressbook_sidebox_header.egw_fw_ui_sidemenu_entry_header_active {
   background-color: rgba(0, 51, 102, 0.3);
   border-left: 4px solid #003366 !important;

pixelegg/css/pixelegg.css

@@ -6800,6 +6800,23 @@ table.egwGridView_grid img.et2_appicon {
   filter: initial;
   /* IE 6-9 */
 }
+:root,
+:host,
+.sl-theme-light {
+  --sl-font-sans: egroupware, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --sl-button-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-help-text-font-size-medium: var(--sl-font-size-medium);
+  --sl-spacing-small: 0.1rem;
+  --sl-spacing-medium: 0.5rem;
+  --sl-input-border-radius-small: 2px;
+  --sl-input-border-radius-medium: 3px;
+  --sl-input-border-color-focus: #E6E6E6;
+  --indicator-color: #696969;
+  --sl-input-focus-ring-color: #26537C;
+  --sl-focus-ring-width: 2px;
+  --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
+  --track-width: 3px;
+}
 #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #addressbook_sidebox_header.egw_fw_ui_sidemenu_entry_header_active {
   background-color: rgba(0, 51, 102, 0.3);
   border-left: 4px solid #003366 !important;

pixelegg/css/pixelegg.less

@@ -11,6 +11,23 @@
 @import "monochrome.less";
 @import "../less/app_colors.less";
 
+// overwriting Shoelace light theme
+:root, :host, .sl-theme-light {
+	--sl-font-sans: egroupware, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+	--sl-button-font-size-medium: var(--sl-font-size-medium);
+	--sl-input-help-text-font-size-medium: var(--sl-font-size-medium);
+	--sl-spacing-small: 0.1rem;
+	--sl-spacing-medium: 0.5rem;
+
+	--sl-input-border-radius-small: 2px;
+	--sl-input-border-radius-medium: 3px;
+	--sl-input-border-color-focus: #E6E6E6;
+	--indicator-color: #696969;
+	--sl-input-focus-ring-color: #26537C;
+	--sl-focus-ring-width: 2px;
+	--sl-color-gray-150: hsl(240, 4.9%, 92.5%);
+	--track-width: 3px;
+}
 
 // Addressbook
 #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #addressbook_sidebox_header.egw_fw_ui_sidemenu_entry_header_active {

pixelegg/mobile/fw_mobile.css

@@ -6618,6 +6618,23 @@ span.egw_tutorial_title {
 /*@import "../less/layout_nextmatch.less";*/
 /*@import "../less/layout_footer.less";*/
 /*@import "../less/layout_dialog.less";*/
+:root,
+:host,
+.sl-theme-light {
+  --sl-font-sans: egroupware, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --sl-button-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-help-text-font-size-medium: var(--sl-font-size-medium);
+  --sl-spacing-small: 0.1rem;
+  --sl-spacing-medium: 0.5rem;
+  --sl-input-border-radius-small: 2px;
+  --sl-input-border-radius-medium: 3px;
+  --sl-input-border-color-focus: #E6E6E6;
+  --indicator-color: #696969;
+  --sl-input-focus-ring-color: #26537C;
+  --sl-focus-ring-width: 2px;
+  --sl-color-gray-150: hsl(240, 4.9%, 92.5%);
+  --track-width: 3px;
+}
 #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #addressbook_sidebox_header.egw_fw_ui_sidemenu_entry_header_active {
   background-color: rgba(0, 51, 102, 0.3);
   border-left: 4px solid #003366 !important;