Improve styles of extension blocks

This commit is contained in:
Cohee
2024-12-09 22:37:43 +02:00
parent 3c82d961bd
commit f5088b398f
2 changed files with 19 additions and 9 deletions

View File

@ -83,12 +83,12 @@ label[for="extensions_autoconnect"] {
.extensions_info .extension_block {
display: flex;
flex-wrap: wrap;
padding: 5px 10px;
flex-wrap: nowrap;
padding: 5px;
margin-bottom: 5px;
border: 1px solid var(--SmartThemeBorderColor);
border-radius: 10px;
align-items: center;
align-items: baseline;
justify-content: space-between;
gap: 5px;
}
@ -101,7 +101,7 @@ label[for="extensions_autoconnect"] {
opacity: 0.8;
font-size: 0.8em;
font-weight: normal;
margin-left: 5px;
margin-left: 2px;
}
.extensions_info .extension_block a {
@ -136,3 +136,13 @@ input.extension_missing[type="checkbox"] {
#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;
}

View File

@ -573,13 +573,13 @@ function generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal,
const type = getExtensionType(name);
switch (type) {
case 'global':
return '<i class="fa-fw fa-solid fa-server" data-i18n="[title]ext_type_global" title="This is a global extension, available for all users."></i>';
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-fw fa-solid fa-user" data-i18n="[title]ext_type_local" title="This is a local extension, available only for you."></i>';
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-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>';
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-fw fa-solid fa-question" title="Unknown extension type."></i>';
return '<i class="fa-sm fa-fw fa-solid fa-question" title="Unknown extension type."></i>';
}
}
@ -627,7 +627,7 @@ function generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal,
<div class="extension_icon">
${extensionIcon}
</div>
<div class="flexGrow">
<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>