Improve styles of extension blocks

f5088b398f0e192f7c4098eda75ff183affb8692

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/css/extensions-panel.css+14 -4 Viewed

 .extensions_info .extension_block {
     display: flex;
     flex-wrap: wrapnowrap;
     padding: 5px 10px;
     margin-bottom: 5px;
     border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 10px;
     align-items: centerbaseline;
     justify-content: space-between;
     gap: 5px;
+}

     opacity: 0.8;
     font-size: 0.8em;
     font-weight: normal;
     margin-left: 5px2px;
+}
 .extensions_info .extension_block a {

 #extensionsMenu>div.extension_container:empty {
     display: none;
+}
++
 +.extensions_info .extension_text_block {
 +    white-space: nowrap;
 +    overflow: hidden;
 +    text-overflow: ellipsis;
 +}
++
 +.extensions_info .extension_actions {
 +    flex-wrap: nowrap;
 +}

public/scripts/extensions.js+5 -5 Viewed

         const type = getExtensionType(name);
         switch (type) {
             case 'global':
                 return '<i class="fa-sm fa-fw fa-solid fa-server" data-i18n="[title]ext_type_global" title="This is a global extension, available for all users."></i>';
             case 'local':
                 return '<i class="fa-sm fa-fw fa-solid fa-user" data-i18n="[title]ext_type_local" title="This is a local extension, available only for you."></i>';
             case 'system':
                 return '<i class="fa-sm fa-fw fa-solid fa-cog" data-i18n="[title]ext_type_system" title="This is a built-in extension. It cannot be deleted and updates with the app."></i>';
             default:
                 return '<i class="fa-sm fa-fw fa-solid fa-question" title="Unknown extension type."></i>';
+        }
+    }

             <div class="extension_icon">
                 ${extensionIcon}
             </div>
             <div class="flexGrow extension_text_block">
                 ${originHtml}
                 <span class="${isActive ? 'extension_enabled' : isDisabled ? 'extension_disabled' : 'extension_missing'}">
                     <span class="extension_name">${DOMPurify.sanitize(displayName)}</span>