comand-component-library 3.2.9 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.2.9",
+  "version": "3.3.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.91",
+    "comand-frontend-framework": "^3.2.95",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "sass": "^1.54.9",

package/src/App.vue

@@ -2,8 +2,6 @@
 <template>
     <div id="page-wrapper">
         <a id="anchor-back-to-top"></a>
-        <Icon icon="mdi-light:home" class="icon-" />
-       ICON: <Icon icon="mdi:account-cowboy-hat" />
         <!-- begin site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
         <CmdSiteHeader :sticky="true">
             <template v-slot:top-header>
@@ -41,24 +39,25 @@
                         <li><a href="#section-fancybox">Fancybox</a></li>
                     </ul>
                     <ul>
-                        <li><a href="#section-google-maps-integration">Google-Maps&trade;-Integration</a></li>
+                        <li><a href="#section-google-mapsn">Google-Maps&trade;</a></li>
+                        <li><a href="#section-icons">Icons</a></li>
                         <li><a href="#section-image-gallery">Image Gallery</a></li>
                         <li><a href="#section-image-zoom">Image-Zoom</a></li>
                         <li><a href="#section-list-of-links">List Of Links</a></li>
                         <li><a href="#section-login-form">Login Form</a></li>
                         <li><a href="#section-main-navigation">Main-Navigation</a></li>
-                        <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
                     </ul>
                     <ul>
+                        <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
                         <li><a href="#section-pager">Pager</a></li>
                         <li><a href="#section-share-buttons">Share Buttons</a></li>
                         <li><a href="#section-site-header">Site Header</a></li>
                         <li><a href="#section-site-search">Site Search</a></li>
                         <li><a href="#section-slideshow">Slideshow</a></li>
                         <li><a href="#section-system-message">System-Message</a></li>
-                        <li><a href="#section-tables">Tables</a></li>
                     </ul>
                     <ul>
+                        <li><a href="#section-tables">Tables</a></li>
                         <li><a href="#section-tabs">Tabs</a></li>
                         <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
                         <li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
@@ -940,25 +939,49 @@
             </CmdWidthLimitationWrapper>
             <!-- end fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
-            <a id="section-google-maps-integration"></a>
+            <!-- begin google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <a id="section-google-maps"></a>
             <CmdWidthLimitationWrapper>
-                <h2 class="headline-demopage">Google Maps&trade;-Integration</h2>
+                <h2 class="headline-demopage">Google Maps&trade;</h2>
                 <CmdGoogleMaps :address="addressData"/>
             </CmdWidthLimitationWrapper>
+            <!-- end google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
+            <!-- begin icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <a id="section-icons"></a>
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage">Icons</h2>
+                <ul>
+                    <li><span>Icon from local iconfont</span><CmdIcon iconClass="icon-home" /></li>
+                    <li><span>Icon from iconify-api (icomoon-font)</span><CmdIcon iconClass="icomoon-free:home" /></li>
+                    <li><span>Icon from iconify-api (bootstrap-font)</span><CmdIcon iconClass="bi:house-fill" /></li>
+                    <li><span>Icon from iconify-api (material-design-font)</span><CmdIcon iconClass="mdi:home" /></li>
+                    <li><span>Icon from iconify-api (font-awesome-solid-font)</span><CmdIcon iconClass="fa6-solid:house-chimney" /></li>
+
+                </ul>
+            </CmdWidthLimitationWrapper>
+            <!-- end icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin image-gallery------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-image-gallery"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Image-Gallery</h2>
-                <CmdImageGallery :images="imageGalleryData"/>
+                <CmdImageGallery :images="imageGalleryData" />
             </CmdWidthLimitationWrapper>
+            <!-- end image-gallery ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-image-zoom"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Image-Zoom</h2>
-                <CmdImageZoom small-image-url="media/images/content-images/logo-business-edition-landscape.jpg"
-                              large-image-url="media/images/content-images/logo-business-edition-landscape-large.jpg"/>
+                <CmdImageZoom
+                    small-image-url="media/images/content-images/logo-business-edition-landscape.jpg"
+                    large-image-url="media/images/content-images/logo-business-edition-landscape-large.jpg"
+                />
             </CmdWidthLimitationWrapper>
+            <!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-login-form"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Login Form</h2>
@@ -967,13 +990,15 @@
                 </CmdForm>
                 <p>LoginData: {{ loginData }}</p>
             </CmdWidthLimitationWrapper>
+            <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
 
             <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-list-of-links"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">List Of Links</h2>
                 <h3>Vertical</h3>
-                <CmdListOfLinks :links="listOfLinksData"/>
+                <CmdListOfLinks :links="listOfLinksData" />
                 <h3>Horizontal (aligned left, with headline)</h3>
                 <CmdListOfLinks
                     orientation="horizontal"
@@ -1007,6 +1032,7 @@
             <a id="section-multistep-form-progress-bar"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Multistepform-Progressbar</h2>
+                <h3>Steps with icons</h3>
                 <CmdMultistepFormProgressBar
                     :multisteps="multistepsData.withIcon"
                     separatorIconClass="icon-single-arrow-right"
@@ -1015,7 +1041,7 @@
                 <div>
                     <p>Page {{ showPageMultistep }}</p>
                 </div>
-                <h2 class="headline-demopage">Multistepform-Progressbar</h2>
+                <h3>Steps with number</h3>
                 <CmdMultistepFormProgressBar
                     :showStepNumber="true"
                     :multisteps="multistepsData.withoutIcon"
@@ -1318,9 +1344,6 @@
 </template>
 
 <script>
-import {Icon} from "@iconify/vue"
-
-
 // import used example data
 import accordionData from '@/assets/data/accordion.json'
 import addressData from '@/assets/data/address-data.json'
@@ -1369,6 +1392,7 @@ import CmdForm from "@/components/CmdForm.vue"
 import CmdFormElement from "@/components/CmdFormElement.vue"
 import CmdFormFilters from "@/components/CmdFormFilters.vue"
 import CmdGoogleMaps from "./components/CmdGoogleMaps"
+import CmdIcon from "./components/CmdIcon"
 import CmdImageGallery from "@/components/CmdImageGallery.vue"
 import CmdImageZoom from "@/components/CmdImageZoom.vue"
 import CmdInputGroup from "./components/CmdInputGroup"
@@ -1404,7 +1428,6 @@ import {localizedTime} from "./components/CmdOpeningHours"
 export default {
     name: "App",
     components: {
-        Icon,
         CmdListOfLinks,
         CmdAddressData,
         CmdBackToTopButton,
@@ -1422,6 +1445,7 @@ export default {
         CmdFormFilters,
         CmdFormElement,
         CmdGoogleMaps,
+        CmdIcon,
         CmdImageGallery,
         CmdImageZoom,
         CmdInputGroup,

package/src/assets/data/icon.json

@@ -0,0 +1,17 @@
+{
+  "prefix": "cmd",
+  "icons": {
+    "3d-cursor": {
+      "body": "<path d=\"M13 4H4v9.01h2V6h7V4z\" fill=\"currentColor\"/><path d=\"M29.49 13.12l-9-5a1 1 0 0 0-1 0l-9 5A1 1 0 0 0 10 14v10a1 1 0 0 0 .52.87l9 5A1 1 0 0 0 20 30a1.05 1.05 0 0 0 .49-.13l9-5A1 1 0 0 0 30 24V14a1 1 0 0 0-.51-.88zM19 27.3l-7-3.89v-7.72l7 3.89zm1-9.45L13.06 14L20 10.14L26.94 14zm8 5.56l-7 3.89v-7.72l7-3.89z\" fill=\"currentColor\"/>",
+      "hidden": true
+    },
+    "building": {
+      "body": "<path fill=\"currentColor\" d=\"M28 2H16a2.002 2.002 0 0 0-2 2v10H4a2.002 2.002 0 0 0-2 2v14h28V4a2.002 2.002 0 0 0-2-2ZM9 28v-7h4v7Zm19 0H15v-8a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v8H4V16h12V4h12Z\"/><path fill=\"currentColor\" d=\"M18 8h2v2h-2zm6 0h2v2h-2zm-6 6h2v2h-2zm6 0h2v2h-2zm-6 6h2v2h-2zm6 0h2v2h-2z\"/>"
+    },
+    "linkedin": {
+      "body": "<path fill=\"currentColor\" d=\"M12,12h5.535v2.837h0.078C18.384,13.456,20.27,12,23.078,12C28.92,12,30,15.637,30,20.367V30h-5.77v-8.54\n\tc0-2.037-0.041-4.657-3-4.657c-3.006,0-3.463,2.219-3.463,4.51V30H12V12z\"/>\n<path fill=\"currentColor\" d=\"M2,12h6v18H2V12z\"/>\n<path fill=\"currentColor\" d=\"M8,7c0,1.657-1.343,3-3,3S2,8.657,2,7s1.343-3,3-3S8,5.343,8,7z\"/>"
+    }
+  },
+  "width": 32,
+  "height": 32
+}

package/src/assets/data/tabs.json

@@ -3,19 +3,21 @@
     "name": "Tab 1",
     "headlineText": "Tab 1 Headline",
     "headlineLevel": 4,
-    "iconClass": "icon-home",
+    "iconClass": "icomoon-free:airplane",
     "htmlContent": "<p>Inhalt 1</p>"
   },
   {
     "name": "Tab 2",
     "headlineText": "Tab 2 Headline",
     "headlineLevel": 4,
+    "iconClass": "icomoon-free:blocked",
     "htmlContent": "<p>Inhalt 2</p>"
   },
   {
     "name": "Tab 3",
     "headlineText": "Tab 3 Headline",
     "headlineLevel": 4,
+    "iconClass": "cmd:linkedin",
     "htmlContent": "<p>Inhalt 3</p>"
   }
 ]

package/src/components/CmdAddressData.vue

@@ -51,7 +51,7 @@
                 </dd>
                 <!-- end telephone -->
 
-                <!-- begin mobilephone -->
+                <!-- begin mobile phone -->
                 <dt v-if="addressData.mobilephone?.value">
                     <span v-if="addressData.mobilephone.iconClass && showLabelIcons" :class="addressData.mobilephone.iconClass" :title="getMessage('cmdaddressdata.labeltext.mobile_phone')"></span>
                     <span v-if="showLabelTexts">{{ getMessage('cmdaddressdata.labeltext.mobile_phone')}}</span>
@@ -59,7 +59,7 @@
                 <dd v-if="addressData.mobilephone?.value">
                     <a :href="'tel:' + addressData.mobilephone" title="Call number" class="tel" v-telephone="addressData.mobilephone.value">{{ addressData.mobilephone.value  }}</a>
                 </dd>
-                <!-- end mobilephone -->
+                <!-- end mobile phone -->
 
                 <!-- begin fax -->
                 <dt v-if="addressData.fax?.value">

package/src/components/CmdBox.vue

@@ -368,7 +368,7 @@ export default {
             }
 
             > .toggle-icon, .toggle-icon > [class*="icon"] {
-                font-size: 1rem;
+                font-size: var(--font-size-small);
             }
         }
 

package/src/components/CmdFakeSelect.vue

@@ -265,6 +265,13 @@ export default {
         pathFlags: {
             type: String,
             default: "/media/images/flags"
+        },
+        /**
+         * default text if no option is selected (and first option is not used)
+         */
+        textPleaseSelect: {
+           type: String,
+           default: "Please select\u2026"
         }
     },
     computed: {
@@ -301,10 +308,12 @@ export default {
                     return this.modelValue.length + " options selected"
                 }
             } else if (this.selectData?.length) {
+                // return text of first option nothing is selected (and type !== checkboxOptions && type !== content)
                 return this.selectData[0].text
             }
 
-            return "Please select"
+            // return default text if nothing is selected (and no modelValue exists) (and type !== checkboxOptions && type !== content)
+            return this.textPleaseSelect
         },
         // get the displayed icon (only available for default selectbox)
         optionIcon() {
@@ -323,13 +332,13 @@ export default {
         },
         optionCountry() {
             if (this.type === "country") {
-                return this.modelValue
+                   return this.modelValue || this.selectData?.[0]?.value
             }
             return null
         },
         optionColor() {
             if (this.type === "color") {
-                return this.modelValue
+                return this.modelValue || this.selectData?.[0]?.value
             }
             return null
         },
@@ -495,7 +504,7 @@ export default {
 
                     > [class*="icon-"]:last-child {
                         margin-left: auto;
-                        font-size: 1rem;
+                        font-size: var(--icon-size-small);
                     }
 
                     &:hover, &:active, &:focus {

package/src/components/CmdFancyBox.vue

@@ -2,7 +2,7 @@
     <teleport to="body">
         <dialog
             ref="dialog"
-            :class="['cmd-fancybox', {'show-overlay': showOverlay, 'image' : fancyBoxImageUrl || fancyBoxGallery}]"
+            :class="['cmd-fancybox', {'show-overlay': showOverlay, 'image' : fancyBoxImageUrl || fancyBoxGallery, 'image-gallery': fancyBoxGallery}]"
             :aria-label="ariaLabelText"
         >
             <header class="flex-container">
@@ -404,6 +404,10 @@ export default FancyBox
     overflow: hidden;
     gap: calc(var(--default-gap) / 2);
 
+    &.image-gallery {
+        margin-top: calc(var(--default-margin) * 2)
+    }
+
     // detect open-attribute (will be added to dom automatically)
     &[open] {
         display: flex;
@@ -558,7 +562,7 @@ export default FancyBox
 
 @media only screen and (max-width: $medium-max-width) {
     dialog {
-        top: var(--default-margin);
+        margin-top: var(--default-margin);
     }
 }
 /* end cmd-fancybox ------------------------------------------------------------------------------------------ */

package/src/components/CmdFormFilters.vue

@@ -113,7 +113,7 @@ export default {
         margin-right: var(--default-margin);
         border: var(--default-border);
         background: var(--pure-white);
-        font-size: 1.1rem;
+        font-size: var(--font-size-small);
 
         &:hover, &:active, &:focus {
             border-color: var(--primary-color);
@@ -131,7 +131,7 @@ export default {
         }
 
         [class*="icon-"] {
-            font-size: 1rem;
+            font-size: var(--icon-size-small);
         }
     }
 }

package/src/components/CmdIcon.vue

@@ -1,25 +1,39 @@
 <template>
-    <span v-if="fontSource === 'iconify'" :title="tooltip"></span>
-    <span v-if="fontSource === 'local'" :class="iconClass" :title="tooltip"></span>
+    <!-- begin iconify-icon -->
+    <Icon v-if="isIconify" :icon="iconClass" :title="tooltip"></Icon>
+    <!-- end iconify-icon -->
+
+    <!-- being icon from local iconfont -->
+    <span v-else :class="iconClass" :title="tooltip"></span>
+    <!-- end icon from local iconfont -->
 </template>
 
 <script>
+// import components
+import {Icon} from "@iconify/vue"
+
 export default {
     name: "CmdIcon",
+    components: {
+        Icon
+    },
     props: {
         /**
-         * font-source where to load the icons from
-         * 'local' is for using an implemented icon-fonts by using class 'icon-name'
-         * 'iconify' is for using icons from iconify-dependency (https://iconify.design/)
+         * type that defines where the icon is loaded from
+         * 'auto' is for letting the component check (by classname) if the icon should be loaded from the local iconfont (class="icon-'iconname'")
+         *  or if the icon should be loaded form iconify-api (class='fontprefix':'iconname') (https://iconify.design/)
+         * 'iconify' forces the component to load an iconfify icon (without api) from a local source (which must be defined)
          *
-         * @allowedValues: 'dependency', 'local'
+         * @allowedValues: 'auto', 'iconify'
          */
-        fontSource: {
+        type: {
             type: String,
-            default: 'local'
+            default: "auto"
         },
         /**
-         * icon-class for icon
+         * icon-class for icon from local iconfont
+         *
+         * type-property must be set to auto and classname must include icon-'iconname'
          */
         iconClass: {
             type: String,
@@ -34,6 +48,29 @@ export default {
             type: String,
             required: false
         }
+    },
+    computed: {
+        isIconify() {
+            if (this.type === "iconify") {
+                return true
+            }
+
+            if (this.type === "auto") {
+                return this.iconClass.includes(":")
+            }
+            return false
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.iconify {
+    font-size: var(--icon-size);
+    vertical-align: text-bottom;
+
+    & + span, span + &  {
+        margin-left: calc(var(--default-margin) / 2);
     }
 }
-</script>
+</style>

package/src/components/CmdListOfRequirements.vue

@@ -176,7 +176,6 @@ export default {
         }
 
         span[class*="icon"] {
-            font-size: 1.2rem;
             color: var(--status-color);
         }
 
@@ -186,10 +185,6 @@ export default {
             justify-content: center;
             text-align: center;
             text-decoration: none;
-
-            span[class*="icon"] {
-                font-size: 1.2rem;
-            }
         }
     }
 }

package/src/components/CmdLoginForm.vue

@@ -47,7 +47,7 @@
             <template v-if="options.forgotPassword || options.createAccount">
                 <!-- begin link for 'forgot password' -->
                 <a v-if="options.forgotPassword" href="#" @click.prevent="sendLogin = true">
-                    <span v-if="options.forgotPassword.icon && options.forgotPassword.icon.show && options.forgotPassword.icon.iconClass"
+                    <span v-if="options.forgotPassword.icon?.show && options.forgotPassword.icon?.iconClass"
                           :class="options.forgotPassword.icon.iconClass"
                           :title="options.forgotPassword.icon.tooltip">
                     </span>
@@ -57,7 +57,7 @@
 
                 <!-- begin link-type 'href' for 'create account' -->
                 <a v-if="options.createAccount && options.createAccount.linkType === 'href'" :href="options.createAccount.path">
-                    <span v-if="options.createAccount.icon && options.createAccount.icon.show && options.createAccount.icon.iconClass"
+                    <span v-if="options.createAccount.icon?.show && options.createAccount.icon?.iconClass"
                           :class="options.createAccount.icon.iconClass"
                           :title="options.forgotPassword.icon.tooltip">
                     </span>
@@ -294,20 +294,20 @@ export default {
                     forgotPassword: {
                         icon: {
                             show: true,
-                            iconClass: "icon-help",
+                            iconClass: "icon-questionmark-circle",
                             tooltip: ""
                         },
-                        text: "Forgot password?"
+                        text: "Forgot password"
                     },
                     createAccount: {
                         linkType: "href",
                         path: "#",
                         icon: {
-                        show: true,
-                        iconClass: "icon-register",
-                        tooltip: ""
-                    },
-                        text: "Create new account!"
+                            show: true,
+                            iconClass: "icon-register",
+                            tooltip: ""
+                        },
+                        text: "Create new account"
                     },
                     backToLoginForm: {
                         icon: {
@@ -428,7 +428,6 @@ export default {
             flex: none;
 
             span[class*="icon"] {
-                font-size: 1.3rem;
                 text-decoration: none;
             }
         }

package/src/components/CmdMainNavigation.vue

@@ -408,7 +408,7 @@ export default {
                                     font-weight: bold;
 
                                     &[class*="icon"] {
-                                        font-size: 1rem;
+                                        font-size: var(--font-size-small);
                                     }
                                 }
                             }

package/src/components/CmdMultistepFormProgressBar.vue

@@ -137,7 +137,7 @@ export default {
                         z-index: 1;
 
                         &::before {
-                            font-size: 1rem;
+                            font-size: var(--font-size-small);
                         }
                     }
                 }
@@ -179,7 +179,6 @@ export default {
 
         &.active {
             a {
-                font-weight: bold;
                 background: var(--primary-color);
 
                 span, span[class*='icon'] {
@@ -207,6 +206,7 @@ export default {
                         & + span[class*="icon"] {
                             &:last-child {
                                 border-color: var(--border-color);
+                                color: var(--pure-white);
                                 background: var(--secondary-color);
                             }
                         }

package/src/components/CmdPager.vue

@@ -148,7 +148,7 @@ export default {
             }
 
             > [class*="icon-"] {
-                font-size: 1rem;
+                font-size: var(--icon-size-small);
             }
         }
 

package/src/components/CmdSiteSearch.vue

@@ -373,7 +373,7 @@ export default {
 
     > a {
         [class*='icon'] {
-            font-size: 1rem;
+            font-size: var(--icon-size-small);
         }
     }
 

package/src/components/CmdTable.vue

@@ -199,7 +199,7 @@ export default {
             min-height: 2rem;
 
             span[class*="icon"] {
-                font-size: 1rem;
+                font-size: var(--icon-size-small);
             }
         }
     }
@@ -215,7 +215,7 @@ export default {
             th {
                 a[class*='icon-'] {
                     &, &:hover, &:active, &:focus {
-                        font-size: 1rem;
+                        font-size: var(--icon-size-small);
                         color: var(--pure-white);
                     }
                 }

package/src/components/CmdTabs.vue

@@ -2,8 +2,8 @@
     <div class="cmd-tabs">
         <ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
             <li v-for="(tab, index) in tabs" :key="index" role="tab">
-                <a :class="{active : showTab === index}" @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : false" href="#">
-                    <span v-if="tab.iconClass" :class="tab.iconClass"></span>
+                <a :class="{active : showTab === index}" @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : undefined" href="#">
+                    <CmdIcon v-if="tab.iconClass" :iconClass="tab.iconClass"></CmdIcon>
                     <span v-if="tab.name">{{ tab.name }}</span>
                 </a>
             </li>
@@ -32,13 +32,17 @@
 </template>
 
 <script>
+import {addCollection} from "@iconify/vue"
+import IconData from '@/assets/data/icon.json'
 // import components
 import CmdHeadline from "./CmdHeadline"
-
+import CmdIcon from "./CmdIcon"
+addCollection(IconData)
 export default {
     name: "CmdTabs",
     components: {
-        CmdHeadline
+        CmdHeadline,
+        CmdIcon
     },
     data() {
         return {
@@ -140,10 +144,10 @@ export default {
                 }
 
                 &.active {
-                   color: var(--pure-white);
+                    color: var(--pure-white);
 
                     &:hover, &:active, &:focus {
-                        color: var(--hyperlink-color);
+                        background: var(--hyperlink-color);
                     }
                 }
             }

package/src/components/CmdTooltip.vue

@@ -194,7 +194,7 @@ export default {
 
             span[class*="icon"] {
                 padding-left: 1rem;
-                font-size: 1.2rem;
+                font-size: 1.1rem;
             }
         }
     }

package/src/components/CmdUploadForm.vue

@@ -1046,10 +1046,9 @@ export default {
                     left: 50%;
                     transform: translateX(-50%);
                     z-index: 1;
-                    font-size: 1.2rem;
                     display: table;
-                    top: 0.2rem;
-                    padding: 0.1rem 0.2rem;
+                    top: .2rem;
+                    padding: .1rem .2rem;
                     line-height: 100%;
                     background: var(--color-scheme-background-color);
                 }