Set custom font size(add api parameter customization.font.size)

2022-11-09 21:42:51 +03:00 · 2022-11-09 21:42:51 +03:00 · 4701f10fbf
parent dcfd578f73
commit 4701f10fbf
37 changed files with 161 additions and 64 deletions
--- a/apps/api/documents/api.js
+++ b/apps/api/documents/api.js
@ -148,6 +148,9 @@
                        reviewDisplay: 'original', // original for viewer, markup for editor
                        trackChanges: undefined // true/false - open editor with track changes mode on/off,
                    },
+                    font: {
+                        size: 11px;
+                    },
                    layout: { // hide elements, but don't disable feature
                        toolbar: {
                            file: { // menu file
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@ -237,7 +237,7 @@ define([

    var getWidthOfCaption = function (txt) {
        var el = document.createElement('span');
-        el.style.fontSize = '11px';
+        el.style.fontSize = document.documentElement.style.getPropertyValue("--font-size-base-app-custom") || '11px';
        el.style.fontFamily = 'Arial, Helvetica, "Helvetica Neue", sans-serif';
        el.style.position = "absolute";
        el.style.top = '-1000px';
--- a/apps/common/main/lib/component/ThemeColorPalette.js
+++ b/apps/common/main/lib/component/ThemeColorPalette.js
@ -85,14 +85,14 @@ define([
                        '<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>' +
                        '</a>' +
                    '<% } else if (me.isCaption(item)) { %>' +
-                    '<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=item%></div>' +
+                    '<div class="palette-color-caption"><%=item%></div>' +
                    '<% } %>' +
                '<% }); %>' +
                '</div>' +
                '<% if (me.options.dynamiccolors!==undefined) { %>' +
                '<div class="palette-color-dynamiccolors" style="padding: 4px 0 0 12px">' +
                    '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
-                    '<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=me.textRecentColors%></div>' +
+                    '<div class="palette-color-caption"><%=me.textRecentColors%></div>' +
                    '<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' +
                        '<a class="color-dynamic-<%=i%> dynamic-empty-color <%= me.emptyColorsClass %>" color="" idx="<%=idx++%>">' +
                        '<em><span unselectable="on">&#160;</span></em></a>' +
--- a/apps/common/main/lib/component/Window.js
+++ b/apps/common/main/lib/component/Window.js
@ -500,7 +500,7 @@ define([
                    body.height(parseInt(text_cnt.css('height')) + parseInt(footer.css('height')));
                    window.setHeight(parseInt(body.css('height')) + parseInt(header.css('height')));
                }
-                if (text.height() < icon_height-10)
+                if (text.height() < icon_height/2)
                    text.css({'vertical-align': 'baseline', 'line-height': icon_height+'px'});
            }

--- a/apps/common/main/resources/less/about.less
+++ b/apps/common/main/resources/less/about.less
@ -19,6 +19,7 @@
    .asc-about-header {
        margin: 0 30px;
        font: 12px Tahoma;
+        .font-size-medium();
        letter-spacing: 1px;
        color: @text-normal-ie;
        color: @text-normal;
@ -44,6 +45,7 @@
        &.asc-about-desc-name,
        &.asc-about-lic {
            font: 12px Tahoma;
+            .font-size-medium();
            color: @text-normal-ie;
            color: @text-normal;
        }
@ -62,6 +64,7 @@

    a {
        font: 12px Tahoma;
+        .font-size-medium();
        color: @text-normal-ie;
        color: @text-normal;
    }
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@ -94,6 +94,10 @@
        }
    }

+    .caption {
+        .font-size-normal();
+    }
+
    &.icon-top {
        display: inline-flex;
        flex-direction: column;
@ -483,6 +487,7 @@
    display: block;
    position: relative;
    .border-radius(0);
+    .font-size-normal();
    .font-weight-bold();
    background-color: transparent;

@ -804,6 +809,7 @@
    border: @scaled-one-px-value-ie solid @border-regular-control-ie;
    border: @scaled-one-px-value solid @border-regular-control;
    .border-radius(@border-radius-small);
+    .font-size-normal();

    &.auto {
        width: auto;
@ -1070,6 +1076,7 @@
 // ------------------------

 .dlg-btn {
+    .font-size-normal();
    .font-weight-bold();
    width: 86px;
    color: @text-normal-ie;
--- a/apps/common/main/resources/less/calendar.less
+++ b/apps/common/main/resources/less/calendar.less
@ -83,7 +83,8 @@
      width: 100%;
      margin: 4px 6px 3px 6px;
      text-align: center;
-      font-size: 11px;
+      //font-size: 11px;
+      .font-size-normal();

      label {
        padding: 2px 10px 0;
@ -125,7 +126,8 @@
        display: flex;
        justify-content: center;
        align-items: center;
-        font-size: 13px;
+        //font-size: 13px;
+        .font-size-large();
      }

      .number-day {
--- a/apps/common/main/resources/less/chat.less
+++ b/apps/common/main/resources/less/chat.less
@ -25,7 +25,8 @@
    #chat-title {
        label {
            padding: 18px 20px;
-            font-size: @font-size-large;
+            //font-size: @font-size-large;
+            .font-size-large();
        }
    }

@ -63,7 +64,8 @@
        }

        .name {
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
            .font-weight-bold();
            display: block;
            padding: 0 10px 0 0;
@ -80,7 +82,8 @@
        top: 70px;
        right: 0;
        bottom: 110px;
-        font-size: 12px;
+        //font-size: 12px;
+        .font-size-medium();

        ul {
            margin: 0;
@ -105,7 +108,8 @@
                .user-name {
                    color: @text-normal-ie;
                    color: @text-normal;
-                    font-size: 12px;
+                    //font-size: 12px;
+                    .font-size-medium();
                    .font-weight-bold();
                    overflow: hidden;
                    text-overflow: ellipsis;
@ -151,7 +155,8 @@
            margin-bottom: 5px;
            border: 1px solid @border-regular-control-ie;
            border: 1px solid @border-regular-control;
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();

            &:focus {
                border-color: @border-control-focus-ie;
--- a/apps/common/main/resources/less/combo-border-size.less
+++ b/apps/common/main/resources/less/combo-border-size.less
@ -19,7 +19,8 @@
        span {
            display: inline-block;
            margin-top: 3px;
-            font-size: 11px;
+            //font-size: 11px;
+            .font-size-normal();
            height: 17px;
        }

--- a/apps/common/main/resources/less/combo-dataview.less
+++ b/apps/common/main/resources/less/combo-dataview.less
@ -483,7 +483,8 @@

        .caption{
            line-height: 12px;
-            font-size: 11px;
+            //font-size: 11px;
+            .font-size-normal();
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100%;
--- a/apps/common/main/resources/less/combobox.less
+++ b/apps/common/main/resources/less/combobox.less
@ -8,7 +8,6 @@
    &.input-group-nr > .btn {
        height: @input-height-base;
        padding:  @padding-base-vertical @padding-base-horizontal;
-        font-size:  @font-size-base;
        line-height: @line-height-base;

        -o-transition: none;
@ -22,6 +21,7 @@

    &.input-group-nr > .form-control {
        padding-right: 7px + 2 * @padding-base-horizontal;
+        .font-size-normal();
    }

    .form-control {
@ -29,6 +29,7 @@
        position: static;
        z-index: auto;
        float: none;
+        .font-size-normal();

        .image {
            -webkit-filter: @img-border-type-filter;
--- a/apps/common/main/resources/less/comments.less
+++ b/apps/common/main/resources/less/comments.less
@ -19,7 +19,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;
        }
@ -71,6 +72,7 @@
            color: @text-normal-ie;
            color: @text-normal;
            font: 12px arial;
+            .font-size-medium();
            line-height: normal;
            border-bottom: @scaled-one-px-value-ie dotted @text-normal-ie;
            border-bottom: @scaled-one-px-value dotted @text-normal;
@ -93,7 +95,8 @@
        }

        textarea {
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
            width: 100%;
            resize: none;
            margin-bottom: 5px;
@ -121,6 +124,7 @@
    width: 100%;
    height: 100%;
    font: 12px arial;
+    .font-size-medium();
    line-height: normal;
    position: relative;
    overflow: hidden;
@ -167,7 +171,8 @@
    .user-name {
        color: @text-normal-ie;
        color: @text-normal;
-        font-size: 12px;
+        //font-size: 12px;
+        .font-size-medium();
        .font-weight-bold();
        overflow: hidden;
        text-overflow: ellipsis;
@ -205,10 +210,11 @@
    }

    .user-date {
-        font-size: 11px;
+        //font-size: 11px;
+        .font-size-normal();
        white-space: nowrap;
        padding: 0;
-        height: 12px;
+        //height: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: default;
@ -463,7 +469,8 @@
        min-width: 100px;
        text-align: center;
        cursor: pointer;
-        font-size: 11px;
+        //font-size: 11px;
+        .font-size-normal();
        font-family: @font-family-base;
    }

--- a/apps/common/main/resources/less/dimension-picker.less
+++ b/apps/common/main/resources/less/dimension-picker.less
@ -38,6 +38,7 @@
 }

 .dimension-picker-status {
-    font-size: 12px;
+    //font-size: 12px;
+    .font-size-medium();
    text-align: center;
 }
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@ -1,5 +1,6 @@

 .dropdown-menu {
+    .font-size-normal();
    background-color: @background-normal-ie;
    background-color: @background-normal;
    border-color: @border-regular-control-ie;
--- a/apps/common/main/resources/less/extended-color-picker.less
+++ b/apps/common/main/resources/less/extended-color-picker.less
@ -14,7 +14,8 @@

        label {
            font-weight: normal;
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
            margin-bottom: 0;
            vertical-align: middle;

@ -30,7 +31,8 @@

        input {
            font-weight: normal;
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
            background-color: @background-normal;
        }

--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@ -285,7 +285,8 @@

    .caption {
        cursor: pointer;
-        font-size: 9px;
+        //font-size: 9px;
+        .font-size-tiny();
        margin-left: -18px;
        width: 16px;
        text-align: center;
@ -395,7 +396,8 @@

    padding: 14px;
    width: 285px;
-    font-size: 12px;
+    //font-size: 12px;
+    .font-size-medium();

    z-index: 1042;

@ -445,7 +447,8 @@
        .user-name {
            color: @text-normal-ie;
            color: @text-normal;
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
            .font-weight-bold();
            white-space: nowrap;
            cursor: default;
@ -511,7 +514,8 @@
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
-        font-size: 12px;
+        //font-size: 12px;
+        .font-size-medium();
        line-height: 24px;
        padding: 1px 5px;
        background-color: transparent;
--- a/apps/common/main/resources/less/hint-manager.less
+++ b/apps/common/main/resources/less/hint-manager.less
@ -9,7 +9,8 @@
  background-color: @background-alt-key-hint-ie;
  background-color: @background-alt-key-hint;
  color: @text-alt-key-hint;
-  font-size: 12px;
+  //font-size: 12px;
+  .font-size-medium();
  line-height: 18px;
  padding: 0 4px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
--- a/apps/common/main/resources/less/history.less
+++ b/apps/common/main/resources/less/history.less
@ -19,7 +19,8 @@
        margin-top: 15px;
        padding-top: 4px;
        padding-left: 20px;
-        font-size: 13px;
+        //font-size: 13px;
+        .font-size-large();
        cursor: pointer;

        &:hover {
@ -44,7 +45,8 @@
        margin-top: 8px;
        padding-top: 4px;
        padding-left: 20px;
-        font-size: 13px;
+        //font-size: 13px;
+        .font-size-large();
        cursor: pointer;

        &:hover {
@ -65,7 +67,8 @@
        width: 100%;
        .box-shadow(none);
        margin: 0;
-        font-size: 12px;
+        //font-size: 12px;
+        .font-size-medium();

        &:hover:not(.selected),
        &.over {
@ -98,7 +101,8 @@

        .user-date {
            display: inline-block;
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
            .font-weight-bold();
            margin-right: 12px;
            white-space: nowrap;
@ -127,7 +131,8 @@
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
            .font-weight-bold();
            cursor: pointer;
            text-overflow: ellipsis;
--- a/apps/common/main/resources/less/input.less
+++ b/apps/common/main/resources/less/input.less
@ -4,6 +4,7 @@
    color: @text-normal-ie;
    color: @text-normal;
    .user-select(text);
+    .font-size-normal();

    border: @scaled-one-px-value-ie solid @border-regular-control-ie;
    border: @scaled-one-px-value solid @border-regular-control;
--- a/apps/common/main/resources/less/loadmask.less
+++ b/apps/common/main/resources/less/loadmask.less
@ -47,7 +47,8 @@
    }

    .asc-loadmask-title {
-        .fontsize(@font-size-large);
+        //.fontsize(@font-size-large);
+        .font-size-large();
        margin: 0 8px 0 12px;
        white-space: pre-wrap;
    }
--- a/apps/common/main/resources/less/plugins.less
+++ b/apps/common/main/resources/less/plugins.less
@ -93,7 +93,8 @@
            width: 100%;
            margin-top: 2px;
            padding-right: 20px;
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
            .font-weight-bold();
            overflow: hidden;
            text-overflow: ellipsis;
--- a/apps/common/main/resources/less/review-changes.less
+++ b/apps/common/main/resources/less/review-changes.less
@ -12,7 +12,8 @@
    #id-review-button-reject {
        span.caption {
            vertical-align: middle;
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
            margin: 0 6px;
        }
    }
--- a/apps/common/main/resources/less/searchdialog.less
+++ b/apps/common/main/resources/less/searchdialog.less
@ -125,7 +125,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;
        }
--- a/apps/common/main/resources/less/synchronize-tip.less
+++ b/apps/common/main/resources/less/synchronize-tip.less
@ -449,7 +449,8 @@
    }

    .box-shadow(0 4px 15px -2px rgba(0, 0, 0, 0.5));
-    font-size: 11px;
+    //font-size: 11px;
+    .font-size-normal();
 }

 .asc-synchronizetip .tip-arrow:before {
--- a/apps/common/main/resources/less/theme-colorpalette.less
+++ b/apps/common/main/resources/less/theme-colorpalette.less
@ -65,5 +65,11 @@
            border:solid @scaled-one-px-value @border-color-shading;
        }
    }
+
+    .palette-color-caption {
+        width:100%;
+        float:left;
+        .font-size-normal();
+    }
 }

--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@ -32,7 +32,8 @@

    .box-tabs {
        height: @height-tabs;
-        font-size: 12px;
+        //font-size: 12px;
+        .font-size-medium();

        display: flex;
        align-items: stretch;
@ -100,7 +101,8 @@
                padding: 0 12px;
                text-decoration: none;
                cursor: default;
-                font-size: 12px;
+                //font-size: 12px;
+                .font-size-medium();
                text-align: center;
                color: @text-toolbar-header-ie;
                color: @text-toolbar-header;
--- a/apps/common/main/resources/less/tooltip.less
+++ b/apps/common/main/resources/less/tooltip.less
@ -39,7 +39,8 @@
 }

 .tooltip-inner {
-    font-size: 11px;
+    //font-size: 11px;
+    .font-size-normal();
    background-color: @background-normal-ie;
    background-color: @background-normal;
    color: @text-normal-ie;
--- a/apps/common/main/resources/less/variables.less
+++ b/apps/common/main/resources/less/variables.less
@ -62,6 +62,9 @@
@font-family-tahoma:      tahoma, arial, verdana, sans-serif;
@font-family-base:        @font-family-sans-serif;

+@font-size-base-app:      11px;
+@font-size-base-app:      var(--font-size-base-app-custom, 11px);
+
@font-size-base:          11px;
@font-size-large:         13px;
@font-size-small:         9px;
--- a/apps/common/main/resources/less/window.less
+++ b/apps/common/main/resources/less/window.less
@ -99,7 +99,8 @@
        color: @text-normal-ie;
        color: @text-normal;
        text-align: center;
-        font-size: 12px;
+        //font-size: 12px;
+        .font-size-medium();
        font-weight: 700;
        letter-spacing: 0.01em;
        vertical-align: bottom;
@ -219,7 +220,8 @@
                    padding-left: 60px;

                    span {
-                        font-size: 12px;
+                        //font-size: 12px;
+                        .font-size-medium();
                        white-space: nowrap;

                        a {
@ -335,6 +337,9 @@
                display: inline-block;
            }
        }
+        label {
+            .font-size-normal();
+        }
    }

    .footer {
--- a/apps/documenteditor/main/app/controller/Main.js
+++ b/apps/documenteditor/main/app/controller/Main.js
@ -380,6 +380,10 @@ 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()));
--- a/apps/documenteditor/main/app/view/ViewTab.js
+++ b/apps/documenteditor/main/app/view/ViewTab.js
@ -57,15 +57,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" 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-ftp" style="font-size: 11px;text-align: center;"></span>' +
+                    '<span class="btn-slot text" id="slot-btn-ftp" 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>' +
--- a/apps/documenteditor/main/resources/less/app.less
+++ b/apps/documenteditor/main/resources/less/app.less
@ -191,16 +191,24 @@
    @huge-icon-background-image: var(--huge-icon-background-image);
 }

+.font-size-tiny {
+    .fontsize(calc(@font-size-base-app - 2px)); // 9px
+}
+
 .font-size-small {
-    .fontsize(@font-size-small);
+    .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(calc(@font-size-base-app + 1px)); // 12px
 }

 .font-size-large {
-    .fontsize(@font-size-large);
+    .fontsize(calc(@font-size-base-app + 2px)); // 13px
 }

 // Skeleton of document
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@ -47,7 +47,8 @@
        &:extend(.dropdown-menu > li > a);
        padding-top: 4px;
        cursor: pointer;
-        font-size: 13px;
+        //font-size: 13px;
+        .font-size-large();

        &:hover {
          text-decoration: none;
@ -207,7 +208,7 @@
        }

        &.subgroup-name label{
-          font-size: 11px;
+          .font-size-normal();
          .font-weight-bold();
        }

@ -221,7 +222,8 @@
         width: 30%;
         label {
           .font-weight-bold();
-           font-size: 12px;
+           //font-size: 12px;
+           .font-size-medium();
         }
      }

@ -296,7 +298,8 @@

      .title {
        width: 104px;
-        font-size: 12px;
+        //font-size: 12px;
+        .font-size-medium();
        line-height: 14px;
        height: 28px;
        margin: 8px 8px 12px 8px;
@ -333,7 +336,8 @@
  .recent-wrap {
    padding: 5px 10px;
    cursor: pointer;
-    font-size: 12px;
+    //font-size: 12px;
+    .font-size-medium();

    &:hover,
    &.over {
@ -391,7 +395,8 @@
      width: 100%;
      .box-shadow(none);
      margin: 0;
-      font-size: 12px;
+      //font-size: 12px;
+      .font-size-medium();
      float: none;

      &:not(.header-name) {
@ -416,7 +421,8 @@

    .header-name {
      padding: 16px 2px 4px 10px;
-      font-size: 12px;
+      //font-size: 12px;
+      .font-size-medium();
    }
  }
 }
@ -472,7 +478,8 @@
  }

  label, span {
-    font-size: 12px;
+    //font-size: 12px;
+    .font-size-medium();
  }

  .tool {
@ -516,7 +523,8 @@

 #panel-protect {
 label {
-  font-size: 12px;
+  //font-size: 12px;
+  .font-size-medium();
 }

 #file-menu-panel & {
--- a/apps/documenteditor/main/resources/less/navigation.less
+++ b/apps/documenteditor/main/resources/less/navigation.less
@ -14,7 +14,8 @@
        border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
        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;
        }
@ -24,7 +25,8 @@
        padding-top: 45px;
        height: 100%;
        overflow: hidden;
-        font-size: 12px;
+        //font-size: 12px;
+        .font-size-medium();

        .treeview {
            padding: 8px 0;
@ -47,7 +49,8 @@
            font-size: 10px;
        }
        &.medium{
-            font-size: 12px;
+            //font-size: 12px;
+            .font-size-medium();
            .name {
                padding: 4px 0;
            }
--- a/apps/documenteditor/main/resources/less/statusbar.less
+++ b/apps/documenteditor/main/resources/less/statusbar.less
@ -122,7 +122,8 @@
        margin-left: 137px;
        margin-bottom: 2px;
        width: 285px;
-        font-size: 12px;
+        //font-size: 12px;
+        .font-size-medium();

        > label {
            white-space: normal;
--- a/apps/documenteditor/main/resources/less/thumbnails.less
+++ b/apps/documenteditor/main/resources/less/thumbnails.less
@ -18,7 +18,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;
        }
@ -34,7 +35,8 @@

        #thumbnails-size {
            label {
-                font-size: 11px;
+                //font-size: 11px;
+                .font-size-normal();
                font-weight: normal;
                margin: 0;
                padding-left: 12px;
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@ -203,3 +203,7 @@
        }
    }
 }
+
+#slot-lbl-zoom {
+    .font-size-normal();
+}