From 6b18fa7db93606fb5e61a615ec74caaea0405f70 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Tue, 30 Aug 2022 08:54:29 +0200
Subject: [PATCH] WIP Ui: adopt to the shoelace font-family and size

---
 api/templates/default/etemplate2.css | 23 ++++++++++++-----------
 pixelegg/css/pixelegg.css            | 10 +++++-----
 pixelegg/less/def_fonts.less         |  4 +++-
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index da6ee68854..2827ee8e90 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -1362,7 +1362,6 @@ div.et2_vfsPath ul {
     height: 100%;
     overflow-y: hidden;
     overflow-x: auto;
-    padding-bottom: 13px;
     max-width: 92%;
     margin-right: 7%;
 }
@@ -1385,7 +1384,7 @@ div.et2_vfsPath li {
     display: inline-block;
     padding-right: 5px;
     flex: none;
-    padding-top: 6px;
+    padding-top: 9px;
     color: #26537C;
     border-radius: 5px 0px 0px 5px;
 }
@@ -1638,7 +1637,7 @@ et2-tab-panel {
     box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
     color: #333;
     line-height: 13px;
-    font-size: 11px;
+    font-size: 12px;
     cursor: default;
     word-break: break-word;
     white-space: normal;
@@ -2016,7 +2015,7 @@ td.et2_required {
     background-color: #FFFE36;
     border: 1px solid var(--error-color, #E1E16D);
     color: #000000;
-    font-size: 11px;
+    font-size: 12px;
     min-height: 15px;
     padding: 4px 10px;
 }
@@ -2111,7 +2110,7 @@ div.message, lion-validation-feedback[type] {
     margin: 0px;
     clear: left;
     max-width: 500px;
-    font-size: 11px;
+    font-size: 12px;
 }
 
 div.message.floating, lion-validation-feedback[type] {
@@ -2205,7 +2204,7 @@ lion-validation-feedback[type] {
 .nextmatch_header .header_count span {
     position: relative;
     top: 8px;
-    font-size: 11px;
+    font-size: 12px;
     color: gray;
 }
 
@@ -2848,7 +2847,9 @@ div.et2_toolbar.ui-widget-header {
     border: 1px solid silver;
     border-radius: 3px;
     background-color: #fafafa;
-    font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
     font-size: 9pt;
     font-weight: normal;
     height: 17px;
@@ -2971,7 +2972,7 @@ et2-button.transparent-button::part(container) {
  * Textbox in toolbar or NM header
  */
 .et2_toolbar input.et2_textbox, .nextmatch_header_row input.et2_textbox {
-    height: 18px;
+    height: 26px;
     border-radius: 3px;
     background-color: #fafafa;
     border: 1px solid silver;
@@ -3117,7 +3118,7 @@ et2-button.transparent-button::part(container) {
     -moz-user-select: none;
     background: white;
     right: 0;
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 400;
     box-shadow: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
     border: 1px solid hsl(240deg 6% 90%);
@@ -3141,7 +3142,7 @@ et2-button.transparent-button::part(container) {
     width:auto;
 }
 .ui-toolbar-menulist et2-button::part(label) {
-    font-size: 11px;
+    font-size: 12px;
 }
 .ui-toolbar-menulist et2-button::part(base) {
     border: none;
@@ -3312,7 +3313,7 @@ span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container a {
 .et2_toolbar_more span.et2_checkbox_slideSwitch {
     text-align: left;
     color: black;
-    font-size: 11px;
+    font-size: 12px;
     font-weight: normal;
     width: 100%;
 }
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index c5144a6f1f..0a2efad52d 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -1182,7 +1182,7 @@ option:checked {
 /* Component containers
 ----------------------------------*/
 .ui-widget {
-  font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1.1em;
 }
 .ui-widget .ui-widget {
@@ -1192,7 +1192,7 @@ option:checked {
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-  font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 12px;
 }
 .ui-widget-content {
@@ -2976,7 +2976,7 @@ div.client_error_log tr td.stack > div {
 body,
 textarea,
 button {
-  font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 #egw_fw_basecontainer {
   position: fixed;
@@ -2984,7 +2984,7 @@ button {
   height: 100%;
   padding: 0px;
   margin: 0px;
-  font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background-color: #ffffff;
 }
 input {
@@ -5720,7 +5720,7 @@ button.image_button {
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
-  font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1.2em;
   font-weight: normal;
   height: 30px;
diff --git a/pixelegg/less/def_fonts.less b/pixelegg/less/def_fonts.less
index d15f12d06b..810b010945 100644
--- a/pixelegg/less/def_fonts.less
+++ b/pixelegg/less/def_fonts.less
@@ -20,7 +20,9 @@
 // Schriften
 
 .basefontfamily{
-    font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
 
 }