From ed025149b06218dd1e855412627bb0702802da2b Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Fri, 11 Nov 2022 00:16:53 +0300
Subject: [PATCH] [PE][SSE] Set custom font size

---
 apps/common/main/lib/view/ReviewPopover.js    |  3 +-
 apps/common/main/resources/less/comments.less |  3 +-
 apps/common/main/resources/less/spinner.less  |  2 +-
 apps/common/main/resources/less/tooltip.less  |  4 ++
 .../main/app/controller/DocumentHolder.js     |  2 +-
 .../main/app/controller/Main.js               |  8 ++--
 apps/documenteditor/main/app/view/ViewTab.js  |  2 +-
 .../main/resources/less/navigation.less       |  3 +-
 .../main/resources/less/toolbar.less          |  7 +---
 .../main/app/controller/Main.js               |  7 +++-
 .../main/app/view/ViewTab.js                  |  6 +--
 .../resources/less/advanced-settings.less     |  2 +-
 .../main/resources/less/app.less              | 23 +++++++++--
 .../main/resources/less/document-preview.less |  3 +-
 .../main/resources/less/leftmenu.less         | 26 ++++++++-----
 .../main/resources/less/statusbar.less        |  3 +-
 .../main/resources/less/toolbar.less          |  3 +-
 .../main/app/controller/Main.js               |  7 +++-
 .../main/app/view/ViewTab.js                  |  2 +-
 .../resources/less/advanced-settings.less     |  2 +-
 .../main/resources/less/app.less              | 23 +++++++++--
 .../main/resources/less/celleditor.less       |  3 +-
 .../main/resources/less/leftmenu.less         | 39 +++++++++++++------
 .../main/resources/less/spellcheck.less       |  8 +++-
 .../main/resources/less/statusbar.less        |  3 +-
 .../main/resources/less/toolbar.less          |  6 +--
 26 files changed, 141 insertions(+), 59 deletions(-)

diff --git a/apps/common/main/lib/view/ReviewPopover.js b/apps/common/main/lib/view/ReviewPopover.js
index 0c8c31b42..0d7f0ee9a 100644
--- a/apps/common/main/lib/view/ReviewPopover.js
+++ b/apps/common/main/lib/view/ReviewPopover.js
@@ -490,6 +490,7 @@ define([
                     this.emailMenu = new Common.UI.Menu({
                         maxHeight: 200,
                         cyclic: false,
+                        cls: 'font-size-medium',
                         items: []
                     }).on('render:after', function(mnu) {
                         this.scroller = new Common.UI.Scroller({
@@ -1229,7 +1230,7 @@ define([
                             return (item.email && 0 === item.email.toLowerCase().indexOf(str) || item.name && 0 === item.name.toLowerCase().indexOf(str))
                         });
                     }
-                    var tpl = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem" style="font-size: 12px;">' +
+                    var tpl = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem">' +
                                             '<div style="overflow: hidden; text-overflow: ellipsis; max-width: 195px;"><%= Common.Utils.String.htmlEncode(caption) %></div>' +
                                             '<div style="overflow: hidden; text-overflow: ellipsis; max-width: 195px; color: #909090;"><%= Common.Utils.String.htmlEncode(options.value) %></div>' +
                                         '</a>'),
diff --git a/apps/common/main/resources/less/comments.less b/apps/common/main/resources/less/comments.less
index 97f8f6435..d1035257e 100644
--- a/apps/common/main/resources/less/comments.less
+++ b/apps/common/main/resources/less/comments.less
@@ -202,7 +202,8 @@
             background-color: #ee3525;
             padding: 3px 10px;
             color: #ffffff;
-            font: 11px arial;
+            //font: 11px arial;
+            .font-size-normal();
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
diff --git a/apps/common/main/resources/less/spinner.less b/apps/common/main/resources/less/spinner.less
index 981dbffcd..9776d05d8 100644
--- a/apps/common/main/resources/less/spinner.less
+++ b/apps/common/main/resources/less/spinner.less
@@ -45,7 +45,7 @@
         border-top: @scaled-one-px-value solid transparent;
         border-bottom: @scaled-one-px-value-ie solid transparent;
         border-bottom: @scaled-one-px-value solid transparent;
-
+        font-size: 11px; // must be const value
         i {
             display: inline-block;
             width: 4px;
diff --git a/apps/common/main/resources/less/tooltip.less b/apps/common/main/resources/less/tooltip.less
index e4053ff3c..0ffb893ce 100644
--- a/apps/common/main/resources/less/tooltip.less
+++ b/apps/common/main/resources/less/tooltip.less
@@ -59,6 +59,10 @@
 
 .link-tooltip .tooltip-inner {
     max-width: 500px;
+    .review-date {
+        .font-size-small();
+        opacity: 0.7;
+    }
 }
 
 .auto-tooltip .tooltip-inner {
diff --git a/apps/documenteditor/main/app/controller/DocumentHolder.js b/apps/documenteditor/main/app/controller/DocumentHolder.js
index a9cbed995..3fba7dcb8 100644
--- a/apps/documenteditor/main/app/controller/DocumentHolder.js
+++ b/apps/documenteditor/main/app/controller/DocumentHolder.js
@@ -1017,7 +1017,7 @@ define([
                             changes = changes[0];
                         if (changes) {
                             ToolTip = '<b>'+ Common.Utils.String.htmlEncode(AscCommon.UserInfoParser.getParsedName(changes.get('username'))) +'  </b>';
-                            ToolTip += '<span style="font-size:10px; opacity: 0.7;">'+ changes.get('date') +'</span><br>';
+                            ToolTip += '<span class="review-date">'+ changes.get('date') +'</span><br>';
                             ToolTip += changes.get('changetext');
                             if (ToolTip.length>1000)
                                 ToolTip = ToolTip.substr(0, 1000) + '...';
diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js
index b71469970..ba6107f70 100644
--- a/apps/documenteditor/main/app/controller/Main.js
+++ b/apps/documenteditor/main/app/controller/Main.js
@@ -380,15 +380,15 @@ define([
                     Common.Utils.InternalSettings.set("guest-username", value);
                     Common.Utils.InternalSettings.set("save-guest-username", !!value);
                 }
-                if (this.appOptions.customization.font) {
-                    this.appOptions.customization.font.size && document.documentElement.style.setProperty("--font-size-base-app-custom", this.appOptions.customization.font.size);
-                }
-
                 this.editorConfig.user          =
                 this.appOptions.user            = Common.Utils.fillUserInfo(this.editorConfig.user, this.editorConfig.lang, value ? (value + ' (' + this.appOptions.guestName + ')' ) : this.textAnonymous,
                                                                             Common.localStorage.getItem("guest-id") || ('uid-' + Date.now()));
                 this.appOptions.user.anonymous && Common.localStorage.setItem("guest-id", this.appOptions.user.id);
 
+                if (this.appOptions.customization.font) {
+                    this.appOptions.customization.font.size && document.documentElement.style.setProperty("--font-size-base-app-custom", this.appOptions.customization.font.size);
+                }
+
                 this.appOptions.isDesktopApp    = this.editorConfig.targetApp == 'desktop' || Common.Controllers.Desktop.isActive();
                 this.appOptions.canCreateNew    = this.editorConfig.canRequestCreateNew || !_.isEmpty(this.editorConfig.createUrl) || this.editorConfig.templates && this.editorConfig.templates.length;
                 this.appOptions.canOpenRecent   = this.editorConfig.recent !== undefined && !this.appOptions.isDesktopApp;
diff --git a/apps/documenteditor/main/app/view/ViewTab.js b/apps/documenteditor/main/app/view/ViewTab.js
index 731e46131..5d0b34685 100644
--- a/apps/documenteditor/main/app/view/ViewTab.js
+++ b/apps/documenteditor/main/app/view/ViewTab.js
@@ -57,7 +57,7 @@ define([
                     '<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>' +
                 '</div>' +
                 '<div class="elset" style="text-align: center;">' +
-                    '<span class="btn-slot text" id="slot-lbl-zoom" style="text-align: center;margin-top: 4px;"></span>' +
+                    '<span class="btn-slot text font-size-normal" id="slot-lbl-zoom" style="text-align: center;margin-top: 4px;"></span>' +
                 '</div>' +
             '</div>' +
             '<div class="group small">' +
diff --git a/apps/documenteditor/main/resources/less/navigation.less b/apps/documenteditor/main/resources/less/navigation.less
index e7673d903..2f8f9a99c 100644
--- a/apps/documenteditor/main/resources/less/navigation.less
+++ b/apps/documenteditor/main/resources/less/navigation.less
@@ -46,7 +46,8 @@
             }
         }
         &.small{
-            font-size: 10px;
+            //font-size: 10px;
+            .font-size-small();
         }
         &.medium{
             //font-size: 12px;
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index bbdb00c6c..727f0fd9f 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -130,7 +130,8 @@
     border-radius: 0;
     padding: 3px 10px;
     color: #ffffff;
-    font: 11px arial;
+    //font: 11px arial;
+    .font-size-normal();
     white-space: nowrap;
     letter-spacing: 1px;
     overflow: hidden;
@@ -202,8 +203,4 @@
             display: none !important;
         }
     }
-}
-
-#slot-lbl-zoom {
-    .font-size-normal();
 }
\ No newline at end of file
diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js
index 69c666e0d..9a5059757 100644
--- a/apps/presentationeditor/main/app/controller/Main.js
+++ b/apps/presentationeditor/main/app/controller/Main.js
@@ -344,6 +344,10 @@ define([
                                                   Common.localStorage.getItem("guest-id") || ('uid-' + Date.now()));
                 this.appOptions.user.anonymous && Common.localStorage.setItem("guest-id", this.appOptions.user.id);
 
+                if (this.appOptions.customization.font) {
+                    this.appOptions.customization.font.size && document.documentElement.style.setProperty("--font-size-base-app-custom", this.appOptions.customization.font.size);
+                }
+
                 this.appOptions.isDesktopApp    = this.editorConfig.targetApp == 'desktop' || Common.Controllers.Desktop.isActive();
                 this.appOptions.canCreateNew    = this.editorConfig.canRequestCreateNew || !_.isEmpty(this.editorConfig.createUrl) || this.editorConfig.templates && this.editorConfig.templates.length;
                 this.appOptions.canOpenRecent   = this.editorConfig.recent !== undefined && !this.appOptions.isDesktopApp;
@@ -1040,7 +1044,8 @@ define([
                         });
                     }
                 } else if (!this.appOptions.isDesktopApp && !this.appOptions.canBrandingExt &&
-                    this.editorConfig && this.editorConfig.customization && (this.editorConfig.customization.loaderName || this.editorConfig.customization.loaderLogo)) {
+                    this.editorConfig && this.editorConfig.customization && (this.editorConfig.customization.loaderName || this.editorConfig.customization.loaderLogo ||
+                                                                             this.editorConfig.customization.font && this.editorConfig.customization.font.size)) {
                     Common.UI.warning({
                         title: this.textPaidFeature,
                         msg  : this.textCustomLoader,
diff --git a/apps/presentationeditor/main/app/view/ViewTab.js b/apps/presentationeditor/main/app/view/ViewTab.js
index bd8e8e834..2006d149c 100644
--- a/apps/presentationeditor/main/app/view/ViewTab.js
+++ b/apps/presentationeditor/main/app/view/ViewTab.js
@@ -53,15 +53,15 @@ define([
                         '<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>' +
                     '</div>' +
                     '<div class="elset" style="text-align: center;">' +
-                        '<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>' +
+                        '<span class="btn-slot text font-size-normal" id="slot-lbl-zoom" style="text-align: center;margin-top: 4px;"></span>' +
                     '</div>' +
                 '</div>' +
                 '<div class="group small">' +
                     '<div class="elset">' +
-                        '<span class="btn-slot text" id="slot-btn-fts" style="font-size: 11px;text-align: center;"></span>' +
+                        '<span class="btn-slot text" id="slot-btn-fts" style="text-align: center;"></span>' +
                     '</div>' +
                     '<div class="elset">' +
-                        '<span class="btn-slot text" id="slot-btn-ftw" style="font-size: 11px;text-align: center;"></span>' +
+                        '<span class="btn-slot text" id="slot-btn-ftw" style="text-align: center;"></span>' +
                     '</div>' +
                 '</div>' +
                 '<div class="separator long"></div>' +
diff --git a/apps/presentationeditor/main/resources/less/advanced-settings.less b/apps/presentationeditor/main/resources/less/advanced-settings.less
index 7d3cf7c5f..1e1239e46 100644
--- a/apps/presentationeditor/main/resources/less/advanced-settings.less
+++ b/apps/presentationeditor/main/resources/less/advanced-settings.less
@@ -3,7 +3,7 @@
         padding: 0 15px;
         text-align: right;
         .font-weight-bold();
-        font-size: 11px;
+        .font-size-normal();
     }
 }
 
diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less
index f3ed4c565..eed12b56f 100644
--- a/apps/presentationeditor/main/resources/less/app.less
+++ b/apps/presentationeditor/main/resources/less/app.less
@@ -147,16 +147,33 @@
 @import "sprites/iconssmall@1.75x";
 @import "sprites/iconsbig@1.75x";
 
+.font-size-tiny {
+    .fontsize(9px); // 9px
+    .fontsize(calc(@font-size-base-app - 2px)); // 9px
+}
+
 .font-size-small {
-    .fontsize(@font-size-small);
+    .fontsize(10px); // 10px
+    .fontsize(calc(@font-size-base-app - 1px)); // 10px
 }
 
 .font-size-normal {
-    .fontsize(@font-size-base);
+    .fontsize(@font-size-base-app); // 11px
+}
+
+.font-size-medium {
+    .fontsize(12px); // 12px
+    .fontsize(calc(@font-size-base-app + 1px)); // 12px
 }
 
 .font-size-large {
-    .fontsize(@font-size-large);
+    .fontsize(13px); // 13px
+    .fontsize(calc(@font-size-base-app + 2px)); // 13px
+}
+
+.font-size-huge {
+    .fontsize(14px); // 14px
+    .fontsize(calc(@font-size-base-app + 3px)); // 14px
 }
 
 .slidenum-div {
diff --git a/apps/presentationeditor/main/resources/less/document-preview.less b/apps/presentationeditor/main/resources/less/document-preview.less
index 97729c3db..81733da17 100644
--- a/apps/presentationeditor/main/resources/less/document-preview.less
+++ b/apps/presentationeditor/main/resources/less/document-preview.less
@@ -19,7 +19,8 @@
     }
 
     #preview-label-slides {
-        font: bold 11px Helvetica, Arial, Verdana, sans-serif;
+        //font: bold 11px Helvetica, Arial, Verdana, sans-serif;
+        .font-size-normal();
         color: @text-normal-ie;
         color: @text-normal;
         text-shadow: none;
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index 15f97642c..5ca7eee69 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -158,7 +158,8 @@
                 &:extend(.dropdown-menu > li > a);
                 padding-top: 4px;
                 cursor: pointer;
-                font-size: 13px;
+                //font-size: 13px;
+                .font-size-large();
 
                 &:hover {
                     text-decoration: none;
@@ -216,15 +217,19 @@
 
                 tr {
                     td {
+                        label{
+                            .font-size-normal();
+                        }
+
                         padding: 6px 10px;
                         width: auto !important;
                         &.group-name  label {
-                            font-size: 14px;
+                            //font-size: 14px;
+                            .font-size-huge();
                             .font-weight-bold();
                         }
 
                         &.subgroup-name label{
-                            font-size: 11px;
                             .font-weight-bold();
                         }
 
@@ -237,7 +242,7 @@
 
                             label {
                                 .font-weight-bold();
-                                font-size: 12px;
+                                .font-size-medium();
                             }
                         }
 
@@ -307,7 +312,7 @@
 
                     .title {
                         width: 104px;
-                        font-size: 12px;
+                        .font-size-medium();
                         line-height: 14px;
                         height: 28px;
                         margin: 8px 8px 12px 8px;
@@ -345,7 +350,7 @@
             .recent-wrap {
                 padding: 5px 10px;
                 cursor: pointer;
-                font-size: 12px;
+                .font-size-medium();
 
                 &:hover,
                 &.over {
@@ -403,7 +408,8 @@
                     width: 100%;
                     .box-shadow(none);
                     margin: 0;
-                    font-size: 12px;
+                    //font-size: 12px;
+                    .font-size-medium();
                     float: none;
 
                     &:not(.header-name) {
@@ -482,7 +488,8 @@
             }
 
             label, span {
-                font-size: 12px;
+                //font-size: 12px;
+                .font-size-medium();
             }
 
             .tool {
@@ -504,7 +511,8 @@
 
         #panel-protect {
             label {
-                font-size: 12px;
+                //font-size: 12px;
+                .font-size-medium();
             }
 
             padding: 30px 30px;
diff --git a/apps/presentationeditor/main/resources/less/statusbar.less b/apps/presentationeditor/main/resources/less/statusbar.less
index 06767765a..41ad296ec 100644
--- a/apps/presentationeditor/main/resources/less/statusbar.less
+++ b/apps/presentationeditor/main/resources/less/statusbar.less
@@ -114,7 +114,8 @@
         margin-left: 142px;
         margin-bottom: 2px;
         width: 285px;
-        font-size: 12px;
+        //font-size: 12px;
+        .font-size-medium();
 
         > label {
             white-space: normal;
diff --git a/apps/presentationeditor/main/resources/less/toolbar.less b/apps/presentationeditor/main/resources/less/toolbar.less
index 80129babc..70f5531da 100644
--- a/apps/presentationeditor/main/resources/less/toolbar.less
+++ b/apps/presentationeditor/main/resources/less/toolbar.less
@@ -83,7 +83,8 @@
     border-radius: 0;
     padding: 3px 10px;
     color: #fff;
-    font: 11px arial;
+    //font: 11px arial;
+    .font-size-normal();
     white-space: nowrap;
     letter-spacing: 1px;
     overflow: hidden;
diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js
index 04c77976e..42cb1f833 100644
--- a/apps/spreadsheeteditor/main/app/controller/Main.js
+++ b/apps/spreadsheeteditor/main/app/controller/Main.js
@@ -382,6 +382,10 @@ define([
                                                   Common.localStorage.getItem("guest-id") || ('uid-' + Date.now()));
                 this.appOptions.user.anonymous && Common.localStorage.setItem("guest-id", this.appOptions.user.id);
 
+                if (this.appOptions.customization.font) {
+                    this.appOptions.customization.font.size && document.documentElement.style.setProperty("--font-size-base-app-custom", this.appOptions.customization.font.size);
+                }
+
                 this.appOptions.isDesktopApp    = this.editorConfig.targetApp == 'desktop' || Common.Controllers.Desktop.isActive();
                 this.appOptions.canCreateNew    = this.editorConfig.canRequestCreateNew || !_.isEmpty(this.editorConfig.createUrl) || this.editorConfig.templates && this.editorConfig.templates.length;
                 this.appOptions.canOpenRecent   = this.editorConfig.recent !== undefined && !this.appOptions.isDesktopApp;
@@ -1125,7 +1129,8 @@ define([
                         });
                     }
                 } else if (!this.appOptions.isDesktopApp && !this.appOptions.canBrandingExt && !(this.appOptions.isEditDiagram || this.appOptions.isEditMailMerge || this.appOptions.isEditOle) &&
-                    this.editorConfig && this.editorConfig.customization && (this.editorConfig.customization.loaderName || this.editorConfig.customization.loaderLogo)) {
+                    this.editorConfig && this.editorConfig.customization && (this.editorConfig.customization.loaderName || this.editorConfig.customization.loaderLogo ||
+                                                                             this.editorConfig.customization.font && this.editorConfig.customization.font.size)) {
                     Common.UI.warning({
                         title: this.textPaidFeature,
                         msg  : this.textCustomLoader,
diff --git a/apps/spreadsheeteditor/main/app/view/ViewTab.js b/apps/spreadsheeteditor/main/app/view/ViewTab.js
index 999a30728..0f5683162 100644
--- a/apps/spreadsheeteditor/main/app/view/ViewTab.js
+++ b/apps/spreadsheeteditor/main/app/view/ViewTab.js
@@ -64,7 +64,7 @@ define([
                     '<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>' +
                 '</div>' +
                 '<div class="elset" style="text-align: center;">' +
-                    '<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>' +
+                    '<span class="btn-slot text font-size-normal" id="slot-lbl-zoom" style="text-align: center;margin-top: 4px;"></span>' +
                 '</div>' +
             '</div>' +
             '<div class="separator long"></div>' +
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index eaa2ab0f4..485d9c8fc 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -3,7 +3,7 @@
         padding: 0 0 0 10px;
         text-align: right;
         .font-weight-bold();
-        font-size: 11px;
+        .font-size-normal();
         white-space: nowrap;
     }
 
diff --git a/apps/spreadsheeteditor/main/resources/less/app.less b/apps/spreadsheeteditor/main/resources/less/app.less
index 635889f84..04228b590 100644
--- a/apps/spreadsheeteditor/main/resources/less/app.less
+++ b/apps/spreadsheeteditor/main/resources/less/app.less
@@ -149,16 +149,33 @@
 @import "sprites/iconssmall@1.75x";
 @import "sprites/iconsbig@1.75x";
 
+.font-size-tiny {
+    .fontsize(9px); // 9px
+    .fontsize(calc(@font-size-base-app - 2px)); // 9px
+}
+
 .font-size-small {
-    .fontsize(@font-size-small);
+    .fontsize(10px); // 10px
+    .fontsize(calc(@font-size-base-app - 1px)); // 10px
 }
 
 .font-size-normal {
-    .fontsize(@font-size-base);
+    .fontsize(@font-size-base-app); // 11px
+}
+
+.font-size-medium {
+    .fontsize(12px); // 12px
+    .fontsize(calc(@font-size-base-app + 1px)); // 12px
 }
 
 .font-size-large {
-    .fontsize(@font-size-large);
+    .fontsize(13px); // 13px
+    .fontsize(calc(@font-size-base-app + 2px)); // 13px
+}
+
+.font-size-huge {
+    .fontsize(14px); // 14px
+    .fontsize(calc(@font-size-base-app + 3px)); // 14px
 }
 
 // Skeleton of workbook
diff --git a/apps/spreadsheeteditor/main/resources/less/celleditor.less b/apps/spreadsheeteditor/main/resources/less/celleditor.less
index 26980a101..18131ebbf 100644
--- a/apps/spreadsheeteditor/main/resources/less/celleditor.less
+++ b/apps/spreadsheeteditor/main/resources/less/celleditor.less
@@ -105,7 +105,8 @@
             resize: none;
             min-height: 19px;
             border: 0 none;
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
             line-height: 18px;
             padding-bottom: 0;
 
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index 33193e4a0..17cf9f4db 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -143,7 +143,8 @@
                 &:extend(.dropdown-menu > li > a);
                 padding-top: 4px;
                 cursor: pointer;
-                font-size: 13px;
+                //font-size: 13px;
+                .font-size-large();
 
                 &:hover {
                     text-decoration: none;
@@ -210,7 +211,8 @@
                         width: 100%;
                         .box-shadow(none);
                         margin: 0;
-                        font-size: 12px;
+                        //font-size: 12px;
+                        .font-size-medium();
 
                         .settings-item-wrap {
                             padding: 4px 2px 4px 20px;
@@ -246,15 +248,19 @@
                 width: auto !important;
                 tr {
                     td {
+                        label{
+                            .font-size-normal();
+                        }
+
                         //padding: 5px 10px;
                         padding: 6px 10px;
                         &.group-name label {
-                            font-size: 14px;
+                            //font-size: 14px;
+                            .font-size-huge();
                             .font-weight-bold();
                         }
 
                         &.subgroup-name label{
-                            font-size: 11px;
                             .font-weight-bold();
                         }
 
@@ -268,7 +274,8 @@
 
                             label {
                                 .font-weight-bold();
-                                font-size: 12px;
+                                .font-size-medium();
+                                //font-size: 12px;
                             }
                         }
 
@@ -362,7 +369,8 @@
 
                     .title {
                         width: 104px;
-                        font-size: 12px;
+                        //font-size: 12px;
+                        .font-size-medium();
                         line-height: 14px;
                         height: 28px;
                         margin: 8px 8px 12px 8px;
@@ -400,7 +408,8 @@
             .recent-wrap {
                 padding: 5px 10px;
                 cursor: pointer;
-                font-size: 12px;
+                //font-size: 12px;
+                .font-size-medium();
 
                 &:hover,
                 &.over {
@@ -458,7 +467,8 @@
                     width: 100%;
                     .box-shadow(none);
                     margin: 0;
-                    font-size: 12px;
+                    //font-size: 12px;
+                    .font-size-medium();
                     float: none;
 
                     &:not(.header-name) {
@@ -537,7 +547,8 @@
             }
 
             label, span {
-                font-size: 12px;
+                //font-size: 12px;
+                .font-size-medium();
             }
 
             .tool {
@@ -559,7 +570,8 @@
 
         #panel-protect {
             label {
-                font-size: 12px;
+                //font-size: 12px;
+                .font-size-medium();
             }
 
             padding: 30px 30px;
@@ -610,8 +622,11 @@
                 flex-direction: column;
                 border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
                 border-right: @scaled-one-px-value solid @border-toolbar;
-                label.header {
-                    font-weight: 700;
+                label {
+                    .font-size-normal();
+                    &.header {
+                        font-weight: 700;
+                    }
                 }
                 .footer {
                     .btn.primary {
diff --git a/apps/spreadsheeteditor/main/resources/less/spellcheck.less b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
index 2f7f4cebf..0420be3fe 100644
--- a/apps/spreadsheeteditor/main/resources/less/spellcheck.less
+++ b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
@@ -15,7 +15,8 @@
         border-bottom: @scaled-one-px-value solid @border-toolbar;
 
         label {
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
             .font-weight-bold();
             margin-top: 2px;
         }
@@ -29,6 +30,10 @@
         padding-top: 45px;
         overflow: hidden;
 
+        label {
+            .font-size-normal();
+        }
+
         .spellcheck-settings-inner {
             position: relative;
             width: 100%;
@@ -86,6 +91,7 @@
 
     #spellcheck-complete {
         display: flex;
+        .font-size-normal();
     }
     .btn-resolve
     {
diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less
index ec2de36cb..4558beb39 100644
--- a/apps/spreadsheeteditor/main/resources/less/statusbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less
@@ -63,7 +63,8 @@
             margin-right: 160px;
             margin-bottom: 2px;
             width: 285px;
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
             left: auto;
             right: 0;
 
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index 62385c1fd..3c5f71b15 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -68,7 +68,8 @@
     border-radius: 0;
     padding: 3px 10px;
     color: #ffffff;
-    font: 11px arial;
+    //font: 11px arial;
+    .font-size-normal();
     pointer-events: none;
     white-space: nowrap;
     letter-spacing: 1px;
@@ -210,5 +211,4 @@
             .box-shadow(inset 0 0 0 @scaled-two-px-value @border-preview-select) !important;
         }
     }
-}
-
+}
\ No newline at end of file