Merge pull request #3838 from crazyserver/MOBILE-4362

Mobile 4362

src/addons/block/activitymodules/components/activitymodules/activitymodules.scss

@@ -1,13 +1,7 @@
 :host {
-    --mod-icon-filter: brightness(0);
-
     core-mod-icon {
         background: transparent;
         margin: 0;
-        --filter: var(--mod-icon-filter);
+        --filter: var(--module-icon-filter);
     }
 }
-
-:host-context(html.dark) {
-    --mod-icon-filter: brightness(0) invert(1);
-}

src/addons/messages/pages/discussion/discussion.html

@@ -6,7 +6,7 @@
         <ion-title>
             <h1>
                 <img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage" alt=""
-                    onError="this.src='assets/img/group-avatar.svg'" core-external-content role="presentation" [siteId]="siteId || null">
+                    onError="this.src='assets/img/group-avatar.svg'" core-external-content role="presentation" [siteId]="siteId">
                 <core-user-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" [user]="otherMember" [linkProfile]="false"
                     [checkOnline]="otherMember.showonlinestatus">
                 </core-user-avatar>

src/addons/messages/pages/discussion/discussion.ts

@@ -58,7 +58,6 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
     @ViewChild(IonContent) content?: IonContent;
     @ViewChild(CoreInfiniteLoadingComponent) infinite?: CoreInfiniteLoadingComponent;
 
-    siteId: string;
     protected fetching = false;
     protected polling?: number;
     protected logger: CoreLogger;
@@ -79,6 +78,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
     conversation?: AddonMessagesConversationFormatted; // The conversation object (if it exists).
     userId?: number; // User ID you're talking to (only if group messaging not enabled or it's a new individual conversation).
     currentUserId: number;
+    siteId: string;
     title?: string;
     showInfo = false;
     conversationImage?: string;

src/addons/mod/lti/services/handlers/module.ts

@@ -22,7 +22,6 @@ import { AddonModLtiHelper } from '../lti-helper';
 import { AddonModLtiIndexComponent } from '../../components/index';
 import { CoreModuleHandlerBase } from '@features/course/classes/module-base-handler';
 import { CoreCourse } from '@features/course/services/course';
-import { CoreSites } from '@services/sites';
 
 /**
  * Handler to support LTI modules.
@@ -87,19 +86,6 @@ export class AddonModLtiModuleHandlerService extends CoreModuleHandlerBase imple
         return module?.modicon ?? modicon ?? CoreCourse.getModuleIconSrc(this.modName);
     }
 
-    /**
-     * @inheritdoc
-     */
-    iconIsShape(module?: CoreCourseModuleData | undefined, modicon?: string | undefined): boolean | undefined {
-        const iconUrl = module?.modicon ?? modicon;
-
-        if (!iconUrl) {
-            return true;
-        }
-
-        return iconUrl.startsWith(CoreSites.getRequiredCurrentSite().siteUrl);
-    }
-
 }
 
 export const AddonModLtiModuleHandler = makeSingleton(AddonModLtiModuleHandlerService);

src/addons/mod/resource/services/handlers/module.ts

@@ -170,14 +170,5 @@ export class AddonModResourceModuleHandlerService extends CoreModuleHandlerBase
         return AddonModResourceIndexComponent;
     }
 
-    /**
-     * @inheritdoc
-     */
-    iconIsShape(module?: CoreCourseModuleData | undefined, modicon?: string | undefined): boolean | undefined {
-        const iconUrl = module?.modicon ?? modicon;
-
-        return !iconUrl?.startsWith('assets/img/files_legacy/') && !iconUrl?.endsWith('.png');
-    }
-
 }
 export const AddonModResourceModuleHandler = makeSingleton(AddonModResourceModuleHandlerService);

src/addons/mod/url/services/handlers/module.ts

@@ -218,15 +218,6 @@ export class AddonModUrlModuleHandlerService extends CoreModuleHandlerBase imple
         return this.shouldOpenLink(module);
     }
 
-    /**
-     * @inheritdoc
-     */
-    iconIsShape(module?: CoreCourseModuleData | undefined, modicon?: string | undefined): boolean | undefined {
-        const iconUrl = module?.modicon ?? modicon;
-
-        return !iconUrl?.startsWith('assets/img/files_legacy/') && !iconUrl?.endsWith('.png');
-    }
-
     /**
      * Log module viewed.
      */

src/core/components/mod-icon/mod-icon.scss

@@ -7,7 +7,6 @@
     --icon-radius: var(--module-icon-radius, var(--radius-xs));
     --margin-end: 0px;
     --margin-vertical: 0px;
-    --filter: brightness(0) invert(1);
 
     margin-top: var(--margin-vertical);
     margin-bottom: var(--margin-vertical);
@@ -22,7 +21,7 @@
         &.#{$type} {
             background-color: var(--activity#{$type});
             img {
-                filter: var(--filter);
+                filter: var(--filter, brightness(0) invert(1));
             }
         }
     }

src/core/components/mod-icon/mod-icon.ts

@@ -17,6 +17,7 @@ import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChange } from '@
 import { CoreCourse } from '@features/course/services/course';
 import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate';
 import { CoreSites } from '@services/sites';
+import { CoreUrlUtils } from '@services/utils/url';
 
 const assetsPath = 'assets/img/';
 const fallbackModName = 'external-tool';
@@ -54,12 +55,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
     async ngOnInit(): Promise<void> {
         if (!this.modname && this.modicon) {
             // Guess module from the icon url.
-            const matches = this.modicon.match('/theme/image.php/[^/]+/([^/]+)/[-0-9]*/');
+            this.modname = this.getComponentNameFromIconUrl(this.modicon);
-            this.modname = (matches && matches[1]) || '';
-
-            if (this.modname.startsWith('mod_')) {
-                this.modname = this.modname.substring(4);
-            }
         }
 
         this.modNameTranslated = CoreCourse.translateModuleName(this.modname, this.fallbackTranslation);
@@ -105,16 +101,15 @@ export class CoreModIconComponent implements OnInit, OnChanges {
             !!this.modname &&
             !!this.componentId &&
             !this.isLocalUrl &&
-            !this.icon.match('/theme/image.php/[^/]+/' + this.modname + '/[-0-9]*/');
+            this.getComponentNameFromIconUrl(this.icon) != this.modname;
 
-        const iconIsShape = await CoreCourseModuleDelegate.moduleIconIsShape(this.modname, this.icon);
+        this.noFilter = await this.getIconNoFilter();
-        this.noFilter = iconIsShape === false;
     }
 
     /**
      * Icon to load on error.
      */
-    loadFallbackIcon(): void {
+    async loadFallbackIcon(): Promise<void> {
         this.isLocalUrl = true;
         const moduleName = !this.modname || CoreCourse.CORE_MODULES.indexOf(this.modname) < 0
             ? fallbackModName
@@ -127,7 +122,75 @@ export class CoreModIconComponent implements OnInit, OnChanges {
         }
 
         this.icon = path + moduleName + '.svg';
-        this.noFilter = false;
+        this.noFilter = await this.getIconNoFilter();
+    }
+
+    /**
+     * Returns if the icon does not need to be filtered.
+     *
+     * @returns wether the icon does not need to be filtered.
+     */
+    protected async getIconNoFilter(): Promise<boolean> {
+        // Earlier 4.0, icons were never filtered.
+        if (this.legacyIcon) {
+            return true;
+        }
+
+        // No icon or local icon (not legacy), filter it.
+        if (!this.icon || this.isLocalUrl) {
+            return false;
+        }
+
+        // If it's an Moodle Theme icon, check if filtericon is set and use it.
+        if (this.icon && CoreUrlUtils.isThemeImageUrl(this.icon)) {
+            const iconParams = CoreUrlUtils.extractUrlParams(this.icon);
+            if (iconParams['filtericon'] === '1') {
+                return false;
+            }
+
+            // filtericon was introduced in 4.2 and backported to 4.1.3 and 4.0.8.
+            if (this.modname && !CoreSites.getCurrentSite()?.isVersionGreaterEqualThan(['4.0.8', '4.1.3', '4.2'])) {
+                // If version is prior to that, check if the url is a module icon and filter it.
+                if (this.getComponentNameFromIconUrl(this.icon) === this.modname) {
+                    return false;
+                }
+            }
+        }
+
+        // External icons, or non monologo, do not filter.
+        return true;
+    }
+
+    /**
+     * Guesses the mod name form the url.
+     *
+     * @param iconUrl Icon url.
+     * @returns Guessed modname.
+     */
+    protected getComponentNameFromIconUrl(iconUrl: string): string {
+        if (!CoreUrlUtils.isThemeImageUrl(this.icon)) {
+            // Cannot be guessed.
+            return '';
+        }
+
+        const iconParams = CoreUrlUtils.extractUrlParams(iconUrl);
+        let component = iconParams['component'];
+
+        if (!component) {
+            const matches = iconUrl.match('/theme/image.php/[^/]+/([^/]+)/[-0-9]*/');
+            component = (matches && matches[1]) || '';
+        }
+
+        // Some invalid components (others may be added later on).
+        if (component === 'core' || component === 'theme') {
+            return '';
+        }
+
+        if (component.startsWith('mod_')) {
+            component = component.substring(4);
+        }
+
+        return component;
     }
 
 }

src/core/components/user-avatar/core-user-avatar.html

@@ -1,9 +1,9 @@
 <ng-container *ngIf="avatarUrl">
-    <img *ngIf="linkProfile" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content
+    <img class="userpicture" *ngIf="linkProfile" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content
         (error)="loadImageError()" (ariaButtonClick)="gotoProfile($event)" [siteId]="siteId">
 
-    <img *ngIf="!linkProfile" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content
+    <img class="userpicture" *ngIf="!linkProfile" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}"
-        (error)="loadImageError()" aria-hidden="true" [siteId]="siteId">
+        core-external-content (error)="loadImageError()" aria-hidden="true" [siteId]="siteId">
 </ng-container>
 <ng-container *ngIf="!avatarUrl && initials">
     <div class="userinitials" *ngIf="linkProfile" [attr.aria-label]="'core.pictureof' | translate:{$a: fullname}"
@@ -16,10 +16,11 @@
     </div>
 </ng-container>
 <ng-container *ngIf="!avatarUrl && !initials">
-    <img *ngIf="linkProfile" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}"
+    <img class="userpicture" *ngIf="linkProfile" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}"
         (ariaButtonClick)="gotoProfile($event)">
 
-    <img *ngIf="!linkProfile" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}" aria-hidden="true">
+    <img class="userpicture" *ngIf="!linkProfile" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}"
+        aria-hidden="true">
 </ng-container>
 
 <span *ngIf="checkOnline && isOnline()" class="contact-status online" role="status" [attr.aria-label]="'core.online' | translate">

src/core/components/user-avatar/user-avatar.scss

@@ -4,40 +4,47 @@
     position: relative;
     width: var(--core-avatar-size);
     height: var(--core-avatar-size);
+    padding: 0px;
     --contact-status-size: 14px;
     --margin-end-on-item: 8px;
     --margin-vertical-on-item: 8px;
+    --userpicture-padding: 0px;
 
-    img {
+    img.userpicture {
         border-radius: var(--core-avatar-radius);
         width: var(--core-avatar-size);
         height: var(--core-avatar-size);
         max-width: var(--core-avatar-size);
         max-height: var(--core-avatar-size);
-    }
+        padding: var(--userpicture-padding);
-    img[alt] {
+        &[alt] {
             text-indent: -999999px;
             white-space: nowrap;
             overflow: hidden;
         }
-    img[core-external-content]:not([src]),
+        &:not([src]),
-    img[core-external-content][src=""] {
+        &[src=""] {
             visibility: visible;
             display: inline-block;
             position: relative;
+            margin: var(--userpicture-padding);
+            width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
+            height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
             &:after {
                 border-radius: var(--core-avatar-radius);
                 display: block;
                 position: absolute;
                 top: 0;
                 left: 0;
-            width: 100%;
+                right: 0;
-            height: 100%;
+                bottom: 0;
                 background: url('/assets/img/user-avatar.png');
                 background-size: contain;
                 content: "";
             }
         }
+    }
+
     &.core-bar-button-image {
         padding: 0;
         width: var(--core-header-toolbar-button-image-size);
@@ -74,9 +81,10 @@
         border-radius: var(--core-avatar-radius);
         color: var(--gray-800);
         font-weight: normal;
-        width: var(--core-avatar-size);
+        width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
-        height: var(--core-avatar-size);
+        height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
         font-size: calc(var(--core-avatar-size)*0.3);
+        margin: var(--userpicture-padding);
     }
 
     &.large-avatar .userinitials {

src/core/components/user-avatar/user-avatar.ts

@@ -20,8 +20,8 @@ import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { USER_PROFILE_PICTURE_UPDATED, CoreUserBasicData } from '@features/user/services/user';
 import { CoreNavigator } from '@services/navigator';
 import { CoreNetwork } from '@services/network';
-import { CoreUrl } from '@singletons/url';
 import { CoreUserHelper } from '@features/user/services/user-helper';
+import { CoreUrlUtils } from '@services/utils/url';
 
 /**
  * Component to display a "user avatar".
@@ -78,7 +78,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     /**
-     * Listen to changes.
+     * @inheritdoc
      */
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
         // If something change, update the fields.
@@ -111,7 +111,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
             this.initials = CoreUserHelper.getUserInitials(this.user);
         }
 
-        if (this.initials && this.avatarUrl && CoreUrl.parse(this.avatarUrl)?.path?.startsWith('/theme/image.php')) {
+        if (this.initials && this.avatarUrl && CoreUrlUtils.isThemeImageUrl(this.avatarUrl)) {
             this.avatarUrl = undefined;
         }
 
@@ -166,7 +166,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     /**
-     * Component destroyed.
+     * @inheritdoc
      */
     ngOnDestroy(): void {
         this.pictureObserver.off();

src/core/features/course/services/module-delegate.ts

@@ -93,6 +93,7 @@ export interface CoreCourseModuleHandler extends CoreDelegateHandler {
      * @param module Module to get the icon from.
      * @param modicon The mod icon string.
      * @returns Whether the icon should be treated as a shape.
+     * @deprecated since 4.3. Now it uses platform information. This function is not used anymore.
      */
     iconIsShape?(module?: CoreCourseModuleData, modicon?: string): Promise<boolean | undefined> | boolean | undefined;
 
@@ -415,6 +416,7 @@ export class CoreCourseModuleDelegateService extends CoreDelegate<CoreCourseModu
      * @param modicon The mod icon string.
      * @param module The module to use.
      * @returns Whether the icon should be treated as a shape.
+     * @deprecated since 4.3. Now it uses platform information. This function is not used anymore.
      */
     async moduleIconIsShape(modname: string, modicon?: string, module?: CoreCourseModuleData): Promise<boolean | undefined> {
         return await this.executeFunctionOnEnabled<Promise<boolean>>(modname, 'iconIsShape', [module, modicon]);

src/core/features/grades/pages/course/course.scss

@@ -8,7 +8,6 @@
     --even-cell-hover: var(--light);
     --icon-color: var(--gray-500);
     --border-color: var(--stroke);
-    --mod-icon-filter: brightness(0);
 
     .odd {
         --cell-background: var(--odd-cell-background);
@@ -29,7 +28,6 @@
     --even-cell-background: var(--gray-900);
     --even-cell-hover: var(--gray-700);
     --icon-color: var(--gray-200);
-    --mod-icon-filter: brightness(0) invert(1);
 }
 
 .core-grades-table {
@@ -89,7 +87,7 @@
             --padding: 0px;
             --size: 16px;
             background: transparent;
-            --filter: var(--mod-icon-filter);
+            --filter: var(--module-icon-filter);
         }
 
 

src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss

@@ -1,12 +1,7 @@
-core-user-avatar {
-    padding: 0;
-}
-
 :host-context(ion-tabs.placement-side ion-toolbar) {
     display: none;
 }
 
-:host-context(ion-toolbar) core-user-avatar ::ng-deep img,
+:host core-user-avatar {
-:host-context(ion-tab-bar) core-user-avatar ::ng-deep img {
+    --userpicture-padding: 6px !important;
-    padding: 6px !important;
 }

src/core/features/question/services/question-helper.ts

@@ -27,6 +27,7 @@ import { makeSingleton, Translate } from '@singletons';
 import { CoreQuestion, CoreQuestionProvider, CoreQuestionQuestionParsed, CoreQuestionsAnswers } from './question';
 import { CoreQuestionDelegate } from './question-delegate';
 import { CoreIcons } from '@singletons/icons';
+import { CoreUrlUtils } from '@services/utils/url';
 
 /**
  * Service with some common functions to handle questions.
@@ -678,7 +679,7 @@ export class CoreQuestionHelperProvider {
                 return;
             }
 
-            if (fileUrl.indexOf('theme/image.php') > -1 && fileUrl.indexOf('flagged') > -1) {
+            if (CoreUrlUtils.isThemeImageUrl(fileUrl) && fileUrl.indexOf('flagged') > -1) {
                 // Ignore flag images.
                 return;
             }

src/core/features/rating/services/rating.ts

@@ -256,7 +256,7 @@ export class CoreRatingProvider {
 
         const response = await site.read<CoreRatingGetItemRatingsWSResponse>('core_rating_get_item_ratings', params, preSets);
 
-        if (!site.isVersionGreaterEqualThan([' 3.6.5', '3.7.1', '3.8'])) {
+        if (!site.isVersionGreaterEqualThan(['3.6.5', '3.7.1', '3.8'])) {
             // MDL-65042 We need to fetch profiles because the returned profile pictures are incorrect.
             const promises = response.ratings.map((rating: CoreRatingItemRating) =>
                 CoreUser.getProfile(rating.userid, courseId, true, site.id).then((user) => {
@@ -407,7 +407,7 @@ export class CoreRatingProvider {
 
         const ratingsResults = await Promise.all(promises);
 
-        if (!site.isVersionGreaterEqualThan([' 3.6.5', '3.7.1', '3.8'])) {
+        if (!site.isVersionGreaterEqualThan(['3.6.5', '3.7.1', '3.8'])) {
             const ratings: CoreRatingItemRating[] = [].concat.apply([], ratingsResults);
 
             const userIds = ratings.map((rating) => rating.userid);

src/core/features/search/components/global-search-result/global-search-result.scss

@@ -4,7 +4,6 @@
     --core-global-search-result-content-color: var(--gray-700);
     --core-global-search-result-context-color: var(--gray-600);
     --core-global-search-result-icon-size: 16px;
-    --mod-icon-filter: brightness(0);
 
     h3 {
         font-size: 16px;
@@ -14,7 +13,7 @@
 
         core-mod-icon {
             --size: var(--core-global-search-result-icon-size);
-            --filter: var(--mod-icon-filter);
+            --filter: var(--module-icon-filter);
 
             margin-inline-end: var(--spacing-2);
             margin-top: 0px;
@@ -101,5 +100,4 @@
 :host-context(html.dark) ion-item {
     --core-global-search-result-content-color: var(--gray-400);
     --core-global-search-result-context-color: var(--gray-500);
-    --mod-icon-filter: brightness(0) invert(1);
 }

src/core/features/user/pages/about/about.ts

@@ -33,6 +33,7 @@ import { CoreSite } from '@classes/site';
 import { CoreFileUploaderHelper } from '@features/fileuploader/services/fileuploader-helper';
 import { CoreMimetypeUtils } from '@services/utils/mimetype';
 import { Translate } from '@singletons';
+import { CoreUrlUtils } from '@services/utils/url';
 
 /**
  * Page that displays info about a user.
@@ -247,7 +248,7 @@ export class CoreUserAboutPage implements OnInit, OnDestroy {
             return 'undefined';
         }
 
-        if (avatarUrl.startsWith(`${this.site?.siteUrl}/theme/image.php`)) {
+        if (CoreUrlUtils.isThemeImageUrl(avatarUrl, this.site?.siteUrl)) {
             return 'default';
         }
 

src/core/features/user/services/user.ts

@@ -27,7 +27,7 @@ import { CoreStatusWithWarningsWSResponse, CoreWSExternalWarning } from '@servic
 import { CoreError } from '@classes/errors/error';
 import { USERS_TABLE_NAME, CoreUserDBRecord } from './database/user';
 import { CoreUserHelper } from './user-helper';
-import { CoreUrl } from '@singletons/url';
+import { CoreUrlUtils } from '@services/utils/url';
 
 const ROOT_CACHE_KEY = 'mmUser:';
 
@@ -671,7 +671,7 @@ export class CoreUserProvider {
             // Do not prefetch when initials are set and image is default.
             if ('firstname' in entry || 'lastname' in entry) {
                 const initials = CoreUserHelper.getUserInitials(entry);
-                if (initials && imageUrl && CoreUrl.parse(imageUrl)?.path === '/theme/image.php') {
+                if (initials && imageUrl && CoreUrlUtils.isThemeImageUrl(imageUrl)) {
                     return;
                 }
             }

src/core/services/utils/url.ts

@@ -493,11 +493,16 @@ export class CoreUrlUtilsProvider {
     /**
      * Returns if a URL is a theme image URL.
      *
-     * @param url The URL to test.
+     * @param imageUrl The URL to test.
+     * @param siteUrl The Site Url.
      * @returns Whether the URL is a theme image URL.
      */
-    isThemeImageUrl(url: string): boolean {
+    isThemeImageUrl(imageUrl: string, siteUrl?: string): boolean {
-        return url?.indexOf('/theme/image.php') !== -1;
+        if (siteUrl) {
+            return imageUrl.startsWith(`${siteUrl}/theme/image.php`);
+        }
+
+        return imageUrl?.indexOf('/theme/image.php') !== -1;
     }
 
     /**

src/theme/theme.base.scss

@@ -980,6 +980,7 @@ ion-content.limited-width > :not([slot]) {
 ion-toolbar h1 img.core-bar-button-image,
 ion-toolbar h1 .core-bar-button-image img {
     padding: 4px;
+    --userpicture-padding: 4px;
     width: var(--core-header-toolbar-button-image-size);
     height: var(--core-header-toolbar-button-image-size);
     max-width: var(--core-header-toolbar-button-image-size);

src/theme/theme.dark.scss

@@ -130,6 +130,8 @@ html.dark {
     --core-login-input-background: var(--core-login-background);
     --core-login-input-color: var(--core-login-text-color);
 
+    --module-icon-filter: brightness(0) invert(1);
+
     --core-question-correct-color: var(--success-tint);
     --core-question-correct-color-bg: var(--success-shade);
     --core-question-incorrect-color: var(--danger);

src/theme/theme.light.scss

@@ -352,6 +352,8 @@ html {
     --core-messages-discussion-badge: var(--primary);
     --core-messages-discussion-badge-text: var(--white);
 
+    --module-icon-filter: brightness(0);
+
     --addon-forum-avatar-size: var(--core-avatar-size);
     --addon-forum-border-color: var(--stroke);
     --addon-forum-highlight-color: var(--light);